TransitionGroup ​

<TransitionGroup>는 리스트로 렌더링되는 요소 또는 컴포넌트의 삽입, 제거, 순서 변경을 애니메이션화하기 위해 설계된 내장 컴포넌트입니다.

<Transition>과의 차이점 ​

<TransitionGroup>는 <Transition>과 동일한 props, CSS 트랜지션 클래스, JavaScript 훅 리스너를 지원하지만, 다음과 같은 차이점이 있습니다:

• 기본적으로 래퍼 요소를 렌더링하지 않습니다. 하지만 tag prop을 사용하여 렌더링할 요소를 지정할 수 있습니다.

• 트랜지션 모드는 사용할 수 없습니다. 더 이상 상호 배타적인 요소 간에 전환하지 않기 때문입니다.

• 내부의 요소들은 항상 고유한 key 속성을 가져야 합니다.

• CSS 트랜지션 클래스는 그룹/컨테이너 자체가 아니라 리스트의 개별 요소에 적용됩니다.

입장 / 퇴장 트랜지션 ​

다음은 <TransitionGroup>을 사용하여 v-for 리스트에 입장/퇴장 트랜지션을 적용하는 예시입니다:

<TransitionGroup name="list" tag="ul">  <li v-for="item in items" :key="item">  {{ item }}  </li> </TransitionGroup>

.list-enter-active, .list-leave-active {  transition: all 0.5s ease; } .list-enter-from, .list-leave-to {  opacity: 0;  transform: translateX(30px); }

이동 트랜지션 ​

위의 데모에는 몇 가지 명백한 결함이 있습니다: 항목이 삽입되거나 제거될 때, 주변 항목들이 부드럽게 이동하지 않고 즉시 "점프"합니다. 몇 가지 추가 CSS 규칙을 추가하여 이를 개선할 수 있습니다:

.list-move, /* 이동하는 요소에 트랜지션 적용 */ .list-enter-active, .list-leave-active {  transition: all 0.5s ease; }  .list-enter-from, .list-leave-to {  opacity: 0;  transform: translateX(30px); }  /* 퇴장하는 항목이 레이아웃 흐름에서 제거되어  이동 애니메이션이 올바르게 계산될 수 있도록 합니다. */ .list-leave-active {  position: absolute; }

이제 훨씬 더 부드럽게 보입니다. 전체 리스트가 섞일 때도 자연스럽게 애니메이션이 적용됩니다:

전체 예제

커스텀 TransitionGroup 클래스 ​

<TransitionGroup>에 moveClass prop을 전달하여 이동하는 요소에 대한 커스텀 트랜지션 클래스를 지정할 수도 있습니다. 이는 <Transition>에서의 커스텀 트랜지션 클래스와 동일한 방식입니다.

리스트 트랜지션의 스태거링 ​

데이터 속성을 통해 JavaScript 트랜지션과 통신함으로써, 리스트 내 트랜지션을 스태거(순차적으로 지연)하는 것도 가능합니다. 먼저, 항목의 인덱스를 DOM 요소의 데이터 속성으로 렌더링합니다:

<TransitionGroup  tag="ul"  :css="false"  @before-enter="onBeforeEnter"  @enter="onEnter"  @leave="onLeave" >  <li  v-for="(item, index) in computedList"  :key="item.msg"  :data-index="index"  >  {{ item.msg }}  </li> </TransitionGroup>

그런 다음, JavaScript 훅에서 데이터 속성을 기반으로 지연을 주어 요소를 애니메이션화합니다. 이 예제에서는 GSAP 라이브러리를 사용하여 애니메이션을 수행합니다:

function onEnter(el, done) {  gsap.to(el, {  opacity: 1,  height: '1.6em',  delay: el.dataset.index * 0.15,  onComplete: done  }) }

관련 문서

• <TransitionGroup> API 레퍼런스