[Vue] Transition 컴포넌트를 이용한 애니메이션 적용기

Vue에서는 상태 변화에 대응하기 위해 애니메이션 작업에 도움을 주는 컴포넌트를 제공하는데, 그 중 하나인 <Transition> 컴포넌트를 적용하는 방법에 대해 소개하려고 한다.

<Transition> 컴포넌트

• <Transition> 컴포넌트는 DOM에 요소(컴포넌트)가 들어오고(진입(enter)) 나갈(진출(leave)) 때 애니메이션을 적용하기 위해 사용한다.

• <Transition> 컴포넌트는 Vue 내의 빌트인 컴포넌트이기 때문에, 따로 가져올 필요 없이 바로 템플릿 내에 사용이 가능하다.

• <Transition> 컴포넌트를 이용한 애니메이션은 다음 조건들 중 하나를 충족하면 발생한다.

  • v-if 조건부 렌더링
  • v-show 조건부 표시
  • <component> 요소를 통해 전환되는 동적 컴포넌트

일단 현재 프로젝트 내에서 Vue <Transition> 공식문서에서 제공해준 기본 예제를 적용해보았다.

<template>
	<button @click="show = !show">토글</button>
    <Transition>
    	<p v-if="show">안녕</p>
    </Transition>
</template>

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter,
.v-leave-to {
  opacity: 0;
}
</style>

• 스타일 태그 내에 사용한 클래스명들은 전부 <Transition> 자체적으로 적용되는 클래스들로, 총 6가지 클래스명을 이용해 원하는 애니메이션을 구현하는 형태이다.

  태그 종류	의미(상태)
  v-enter-from	진입 시작
  v-enter-active	진입 활성	진입 트랜지션에 대한 딜레이 시간, 지속 시간 정의
  v-enter-to	진입 종료
  v-leave-from	진출 시작
  v-leave-active	진출 활성	진출 트랜지션에 대한 딜레이 시간, 지속 시간 정의
  v-leave-to	진출 종료

💡 주의사항
공식문서에서는 .v-enter 클래스명을 .v-enter-from으로 작성해 적용한 것을 볼 수 있는데,
Vue 3 버전을 기준으로 작성해놓아서 그런지 Vue 2 환경인 나의 경우에는 v-enter-from으로 애니메이션 스타일을 작성했을 때 제대로 적용이 되지 않는 것을 확인할 수 있었다.
그래서 검색해본 결과 .v-enter 로 수정하니 정상적으로 애니메이션이 동작하였다.
본인의 현재 개발 환경 (버전)을 잘 확인하고 적용하는 것이 좋겠다!!

<TransitionGroup> 컴포넌트

• <TransitionGroup> 컴포넌트는 <Transition> 컴포넌트와 유사하지만, 나같이 v-for를 통해 목록을 나타내며 트랜지션이 발생해야하는 경우 사용한다.

• 리스트 내에서의 요소 삽입, 제거, 순서 변경에 대한 애니메이션을 위한 것이다.

실제 프로젝트 내에 적용한 코드이다.

<TransitionGroup name="list" tag="ul">
    <li v-for="item in blockchainList" :key="item.blockNumber" class="card">
      <!-- 상세 구조들,,, -->
    </li>
</TransitionGroup>

v-for를 이용한 목록 구조를 <Transition> 으로 감싸 애니메이션을 일으키려하면 에러가 발생한다.

• <TransitionGroup> 컴포넌트는 tag prop을 이용해서 어떤 엘리먼트로 렌더링 할 지 정할 수 있는데, 나는 ul 태그로 지정해주었다.

• <TransitionGroup> 컴포넌트 내부의 요소는 반드시 고유한 key 값을 필수로 가질 수 있도록 작성해야한다.

/* 움직이는 엘리먼트에 트랜지션 적용 */
.list-move, 
.list-enter-active {
  transition: all 1s ease-in-out;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 이동 애니메이션을 올바르게 계산할 수 있도록
   레이아웃 흐름에서 나머지 항목을 꺼내기. */
.list-leave-active {
  position: absolute;
  right: -100%;
}

• 트랜지션 애니메이션 스타일은 공식문서를 참고해 적용해주었더니 원하는 적용이 금방 이루어졌다!

Vue 에서는 트랜지션 애니메이션을 위한 빌트인 컴포넌트를 제공해주기 때문에 적용 방법만 익혀 둔다면 손쉽게 원하는 동작들을 구현할 수 있을것이다!