**학습 목표
Vue**에서 Transitions, Anmations를 손쉽게 사용할 수 있는
두가지 컴포넌트를 사용해보자
- <Transition>
- <TransitionGroup>

🔷 <Transition> 컴포넌트

DOM이 나타나고 사라질 때 애니메이션을 적용

트리거 조건

• v-if, v-show, <component>

공식문서 : Vue.js Built-in Components Transition

Vue.js

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: 0.2s;
}
.v-enter-to,
.v-leave-from {
  opacity: 1;
}

<aside> 🧑‍💻

적용할 태그를 <Transition>에 넣어준 뒤, <style>을 적용해 줍니다.

</aside>

🔹 Named Transitions, 슬라이드 효과

<Transition name="slide">