TransitionGroup ​

<TransitionGroup> là một thành phần tích hợp được thiết kế để tạo hiệu ứng cho việc chèn, xóa, và thay đổi thứ tự của các phần tử hoặc thành phần được render trong một danh sách.

Sự Khác Biệt so với <Transition> ​

<TransitionGroup> hỗ trợ các thuộc tính, lớp chuyển động CSS, và lắng nghe sự kiện hook JavaScript giống như <Transition>, với những khác biệt sau đây:

• Mặc định, nó không render một phần tử bao. Nhưng bạn có thể chỉ định một phần tử để render bằng cách sử dụng prop tag.

• Chế độ chuyển động không khả dụng, vì chúng ta không còn xen kẽ giữa các phần tử tương đối độc lập.

• Các phần tử bên trong luôn bắt buộc phải có một thuộc tính key duy nhất.

• Các lớp chuyển động CSS sẽ được áp dụng cho từng phần tử trong danh sách, không phải cho nhóm/container chính nó.

Chuyển Động Nhập / Rời ​

Dưới đây là một ví dụ về cách áp dụng chuyển động nhập / rời cho danh sách v-for bằng cách sử dụng <TransitionGroup>:

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

Chuyển Động Di Chuyển ​

Đoạn mã trên có một số điểm yếu rõ ràng: khi một phần tử được chèn hoặc xóa, các phần tử xung quanh nó ngay lập tức "nhảy" vào vị trí thay vì di chuyển mượt mà. Chúng ta có thể sửa điều này bằng cách thêm một số quy tắc CSS bổ sung:

.list-move, /* áp dụng chuyển động cho các phần tử di chuyển */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* đảm bảo rằng các phần tử rời khỏi layout flow để chuyển động
   di chuyển có thể được tính toán đúng cách. */
.list-leave-active {
  position: absolute;
}

Bây giờ nó trông tốt hơn nhiều - thậm chí có hiệu ứng mượt mà khi toàn bộ danh sách được xáo trộn:

Ví dụ đầy đủ

Chuyển Động Động Các Phần Tử Trong Danh Sách ​

Bằng cách giao tiếp với các chuyển động JavaScript thông qua các thuộc tính dữ liệu, cũng có thể làm trì hoãn chuyển động trong một danh sách. Trước hết, chúng ta render chỉ số của một phần tử như một thuộc tính dữ liệu trên phần tử 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>

Sau đó, trong các hook JavaScript, chúng ta thực hiện chuyển động cho phần tử với độ trễ dựa trên thuộc tính dữ liệu. Ví dụ này đang sử dụng thư viện GreenSock để thực hiện animation:

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