3. Transition(Animation)

• vue에서 모달창이 열린다거나 어떤 버튼이 보이고 사라지고 할때 자연스럽게 애니메이션 혹은 트랜지션을 줄때 유용하게 사용이 가능하다.

• <transition name="트랜지션 명">
  	<h1>내용</h1>
  </transition>
  
  <style>
  /* 트랜지션 시작 시 */
  .트랜지션 명-enter-from { 애니메이션 동작 전 상태 }
  .트랜지션 명-enter-active { 애니메이션 동작 중 상태 }
  .트랜지션 명-enter-to { 애니메이션 동작 후 상태 }
  
  /* 트랜지션 종료 시 */
  .트랜지션 명-leave-from { 애니메이션 동작 전 상태 }
  .트랜지션 명-leave-active { 애니메이션 동작 중 상태 }
  .트랜지션 명-leave-to { 애니메이션 동작 후 상태 }
  </style>

• 트랜지션을 주고싶은 컴포넌트 혹은 내용을 transition태그로 감싼 후 name값을 주고 style에서 시작(enter)시 애니메이션과 종료(leave)시 애니메이션을 정의해주면 된다.