[Vue] <Transition> 컴포넌트 -> vue에서 애니메이션 작업

https://ko.vuejs.org/guide/built-ins/transition

Vue.js

 

 

네브바를 만드는데 반응형으로 제작중이라

 

모바일 사이즈에서는 오른쪽 햄버거 아이콘을 클릭하면 

 

메뉴가 아래로 펼쳐지길 바랬다. 

 

 

 

 

 

 

vue에서는 어떻게 만들면 될지 찾아보다가 발견한 

 

Transition 컴포넌트

 

나는 이렇게 만들었다. 

 

 

export default {

  components: {

    Bar,

  },

  setup() {

    const mobileMenuVisible = ref(false); //모바일 메뉴 

    //모바일 메뉴 토글

    const toggleMobileMenu = () => {

      mobileMenuVisible.value = !mobileMenuVisible.value;

    }

    return {

      mobileMenuVisible,

      toggleMobileMenu,

    };

  },

};

 

일단 모바일 메뉴는 

 

아이콘을 클릭 시에 보여야 하므로 

 

mobileMenuVisible의 변수를 만들어서 기본 값을 false로 줬다. ( 처음에는 보이지 않게 )

 

그리고 함수를 하나 만든다. 

 

버튼을 클릭하면 false -> true로 만들어주고 만약 다시 클릭하면  반대로 false로 만들어줘야 하므로 

 

toggleMobileMenu를 만들어서 현재의 mobileMenuVisible의 반대 값으로 돌려준다. 

 

그리고 return 을 사용해서 만든 변수와 함수를 전달한다. 

 

        <!-- Mobile Menu Button -->

        <div

          class="w-full justify-end md:hidden flex items-center"

          :class="{

            'text-gray-300': !scrolled && dark,

            'text-black': scrolled || !dark,

          }"

        >

          <button @click="toggleMobileMenu">

            <Bar fill="#ffffff" />

          </button>

        </div>

 

아이콘을 클릭하면 toggleMobielMenu 함수를 실행한다. 

 

  <!-- Mobile Menu Items -->

    <transition name="fade">

      <div

        v-if="mobileMenuVisible"

        class="md:hidden flex flex-col items-center justify-center w-full"

      >

        <router-link

          :to="route.path"

          :class="{

            'text-gray-300': !scrolled && dark,

            'text-black': scrolled || !dark,

          }"

          v-for="route in routes"

          :key="route"

        >

          <div

            class="w-full h-12 flex justify-center items-center"

            :class="{ active: route.path === $route.path }"

            v-if="route.meta.isMenu"

            @click="toggleMobileMenu"

          >

            {{ route.title }}

          </div>

        </router-link>

      </div>

    </transition>

 

 

 

위의 트랜지션 사용법을 보면

---

 

<Transition>은 빌트인 컴포넌트이므로 등록하지 않고도 컴포넌트의 템플릿에서 사용할 수 있습니다. 기본 슬롯을 통해 전달된 엘리먼트 또는 컴포넌트에 진입(enter) 및 진출(leave) 애니메이션을 적용하는 데 사용할 수 있습니다. 해당 애니메이션은 다음 중 하나의 조건에 충족하면 발생합니다:

• v-if를 통한 조건부 렌더링
• v-show를 통한 조건부 표시
• 스페셜 엘리먼트 <component>를 통해 전환되는 동적 컴포넌트
• key라는 특수한 속성 값 변경

---

 

해당 트랜지션 컴포넌트는 따로 import 하지 않아도 사용가능하다고 적혀있다. 

 

그래서 바로 트랜지션 컴포넌트를 사용한다. 

 

또한 v-if로 조건부 렌더링이 가능하여  메뉴들은  위에서 만든 mobileMenuVisible이 true일 때만 보여지게한다.

 

 

 

그리고 어떠한 메뉴를 클릭하면 해당 페이지로 이동하면서 다시 안보이게 만들기 위해

 

toggleMobielMenu를 실행한다. 

 

 

 

<style>

/* 현재 선택된 페이지 style */

.active {

  border-bottom: 2px solid #4e43ed !important;

  font-weight: 600;

  color: #4e43ed !important;

}

/* 모바일 사이즈 시 오른쪽 Bar 아이콘 클릭 시 실행 */

.fade-enter-active,

.fade-leave-active {

  transition: opacity 0.5s;

}

.fade-enter,

.fade-leave-to {

  opacity: 0;

}

</style>

 

그리고  트랜지션 컴포넌트에 이름을 지정해서 style을 줄 수 있다.