[Vue] 트랜지션 transition

내 포트폴리오를 만들다 보니 찾은 <transition></transition> 태그. 페이지 전환 간 간단한 애니메이션을 넣기 위해 사용하는 태그(!)이다.

CSS랑 결합해서 내가 원하는 애니메이션을 만드는 것이 가장 좋겠지만, 나는 공식 홈페이지에서 소개가 되어있는 Animate.css의 CDN을 활용했다.

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

사용법은 간단하다. 위 CDN을 프로젝트의 index.html에 포함하면 프로젝트 내 모든 vue 컴포넌트에서 바로 사용 가능하다.
일반적인 html 태그를 사용하듯이 전환 효과를 주고 싶은 컴포넌트를 다음과 같이 감싸주면 된다.

<transition
	appear
	appear-active-class="animated fadeInDown"
>
  <PhotoCard class="h-80 m-1 light-shadow" />
</transition>

• 주의할 점은 transition 태그 안에는 하나의 컴포넌트만 포함되어 있어야 한다는 것.
• v-if와 enter-active-class 문법을 잘 활용하면 재미있는 애니메이션을 많이 넣을 수 있다.
• 다수의 컴포넌트에 같은 애니메이션을 넣고 싶은 경우 동적 컴포넌트 문법을 사용하면 된다. 근데 백엔드가 존재하는 서비스의 경우 하나의 컴포넌트에 다양한 데이터를 넣는 것이 주된 목적이지 다수의 컴포넌트를 비슷하게 만들 일이 있을까..?
• v-for를 사용하는 경우 transition-group을 사용하면 된다고 한다. 공식문서

자세한 사용법은 Vue transition 공식 문서와 Aniamted.css 공식 문서를 참고하자.