[vue] TransitionGroup

<TransitionGroup>은 목록에서 렌더링 되는 컴포넌트나 엘리먼트의 순서에 따른 변화, 삽입, 제거에 애니메이션을 적용하기위해 디자인된 내장 컴포넌트 이다.

---

<Transition> 과의 차이점

<TransitionGroup>은 <Transition>과 같은 프로퍼티들과, CSS 트랜지션 클래스들과, 자바스크립트 훅리스너를 지원한다. 다른점들은 다음과 같다:

• 기본적으로, wrapper 엘리먼트를 렌더링하지 않는다. 하지만, tag 프로퍼티를 통해 렌더링될 엘리먼트를 특정할 수 있다.
• 트랜지션 모드는 사용하지 않는다. 왜냐하면, 더이상 엘리먼트를 하나를 교체하며 쓰지 안항도 되기 때문이다.
• 엘리먼트들은 유니크한 키 애트리뷰트를 항상 필요로 한다.
• CSS 트랜지션 클래스들은 그룹이나 컨테이너가 아니라 리스트의 각각의 엘리먼트들에 적용된다.

TIP
DOM 템플릿을 사용할 때, <transition-group>으로 참조된다.

---

삽입 / 제거 트랜지션

<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;
}

이제 보기에 더 낫다 - 리스트가 섞일때에도 부드럽게 애니메이션 된다.

---

Staggering 리스트 트랜지션

데이터 애트리뷰트로 자바스크립트 트랜지션과 의사소통함으로서, 목록에 stagger한 트랜지션도 가능하다. 첫째로, 돔 엘리먼트에 있는 데이터 애트리뷰트로서 아이템의 인덱스를 렌더링한다:

<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>

그 다음, 자바스크립트 훅에서, 데이터 애트리뷰트에 기반한 딜레이로 엘리먼트를 애니메이션 할 수 있다. 예제는 애니메이션을 실행하기 위해 GreenSock 라이브러리를 사용한 것이다.

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