Vue를 이용한 element transition animation 예제

Vue에서 v-for를 이용하여 데이터를 정적으로 표현하는 것이 아닌 animation을 넣어 좀 더 고급스러운 앱을 구현해보자.

 

기본적으로 아래와 같이 v-for를 transition으로 감싸면 해당 코드에 애니메이션을 vue에서 입혀준다.

  <transition name="animation-name">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>

 

document에 아주 자세히 설명되어 있으니 참고해보자.

https://kr.vuejs.org/v2/guide/transitions.html

진입/진출 그리고 리스트 트랜지션 — Vue.js

 

아래는 몇가지 예제이다.

 

 

 

 

 

 

 

 

 

 

 

라우터마저도 animation을 넣을 수 있다.