Vue 공부 - 트랜지션

Vue는 항목이 DOM에 삽입, 갱신 또는 제거될 때 트랜지션 효과를 적용하는 다양한 방법을 제공합니다.

• CSS 트랜지션 및 애니메이션을 위한 클래스를 자동으로 적용
• Animate.css와 같은 타사 CSS 애니메이션 라이브러리 통합
• 트랜지션 훅 중에 JavaScript를 사용하여 DOM을 직접 조작
• Velocity.js와 같은 써드파티 JavaScript 애니메이션 라이브러리 통합

단일 엘리먼트 / 컴포넌트 트랜지션

Vue는 트랜지션 래퍼 컴포넌트를 제공하므로 다음과 같은 상황에서 모든 엘리먼드 또는 컴포넌트에 대한 진입/트랜지션을 추가할 수 있습니다.

• 조건부 렌더링 (v-if 사용)
• 조건부 출력 (v-show 사용)
• 동적 컴포넌트
• 컴포넌트 루트 노드

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity: 0.5s;
}
.fade-enter, .fade-leace-to {
  opacity: 0;
}