목록에 animation 적용해보기

<transition-group tag='ul'>
  <li v-for="user in users" :key="user" @click="removeUser(user)">{{ user }}</li>
</transition-group>

• transition-group 컴포넌트가 있는데 이름에서부터 알 수 있듯이 이 컴포넌트는 여러 요소에도 사용할 수 있다.
  또한 여러 요소에 동시에 애니메이션을 적용할 수 있다.

• ul 요소에 사용하면 유용하다.
  또한 한 번에 여러 항목을 추가하거나 제거하는 목록에서도 사용 가능하다. 따라서 transition-group이 목록에 아주 유용하다.

<transition> VS <transition-group> DOM Tree에 렌더링 되냐 안 되냐의 차이

• 그래서 <transition-group>은 tag로 any valid html element를 넣을 수 있다. 이는 커스텀 컴포넌트도 가능하다.

move 속성

• from, active, to가 동작하는 과정에서 뚝뚝 끊기는 현상을 방지하기위해 move 속성도 추가할 수 있다.

• 이것역시 vue 특수 CSS 클래스이다.

• Vue가 CSS 프로퍼티 transform을 써서 자동으로 요소들을 새로운 위치로 이동시킨다는 것이다.
  Vue는 추가 또는 삭제되지 않는 요소를 새로운 위치로 이동시킬 때 내부적으로 transform을 사용하는데 이때 move 클래스에서 transform 프로퍼티로 요소에 전환 효과를 줄 수 있다.