Vue 애니메이션

애니메이션 효과

• 뷰 프레임워크 자체에서 지원하는 애니메이션 기능 데이터 추가,변경,삭제에 대해서 여러 애니메이션 효과 지원

*예제 

• 기존에 써 놓은 기능 중 ul을 제거하고 transition-group을 사용한다. transition-group은 목록에 애니메이션을 추가할 때 사용하는 태그이며 ,tag 속성에 애니메이션이 들어갈 HTML 태그 이름(p,ul,section등)을 지정하면 된다.

ul 대신 transition-group으로 바꾼 모습

• ul 태그의 자식 태그인 li 태그에 v-bind:key를 간략하게 표현한 :key를 추가한다. 애니메이션 적용을 위해선 
  transition-group 안의 대상 태그에 :key 속성을 꼭 지정해야 한다. :key값으로는 유일하게 구분 될 수 있는
  요소를 넣어준다.

*  :key

1. key 속성은 v-for 디렉티브를 사용할 때 지정하는게 좋다.
2. 뷰는 목록의 요소가 삭제 또는 추가 되었을 때 돔에서 순서를 다시 조정하지 않고 프레임 워크 내부적으로 
   전체 아이템의 순서를 제어한다. 프레임워크에서 순서를 제어하는 이유는 브라우저가 돔을 조작하는데
   소요되는 시간들을 최소화 하기 위함이다.

• style에서 CSS속성을 추가해 줘야한다. 이름은 위의 NAME 속성 값(list)을 접두사로 가지고 
  enter-active,leave-active,enter,leave-to 등을 뒤에 붙여준다. 데이터가 들어오고 나가는 동작을 뜻한다.
  -클래스 규칙과 체계는 뷰 프레임워크 내부적으로 정의되어 있다.-

부드럽게 추가되고 삭제되는 모션