🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng đến với Cafedev! Trong bài viết này, chúng ta sẽ khám phá về cách sử dụng TransitionGroup trong Vue.js để tạo hiệu ứng cho việc chèn, xóa và điều chỉnh thứ tự của các phần tử hoặc thành phần được hiển thị trong một danh sách. TransitionGroup là một thành phần tích hợp sẵn, được thiết kế đặc biệt để thực hiện các hiệu ứng chuyển tiếp một cách linh hoạt và mạnh mẽ. Hãy cùng khám phá chi tiết trong bài viết dưới đây!

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

1. Sự khác biệt so với Transition

<TransitionGroup> hỗ trợ cùng các thuộc tính, lớp chuyển tiếp CSS, và lắng nghe sự kiện JavaScript như <TransitionGroup>, với những khác biệt sau:
– Mặc định, nó không hiển thị một phần tử bao ngoài. Tuy nhiên, bạn có thể chỉ định một phần tử để hiển thị với thuộc tính tag.
– Chế độ chuyển tiếp không có sẵn, 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ó thuộc tính key duy nhất.
– Các lớp chuyển tiếp CSS sẽ được áp dụng cho từng phần tử trong danh sách, không áp dụng cho nhóm / bao container chính nó.
tip Khi sử dụng trong templates trong DOM, nó nên được tham chiếu như .

2. Hiệu ứng khi Thêm / Loại bỏ

Dưới đây là một ví dụ về cách áp dụng hiệu ứng khi thêm / loại bỏ vào một danh sách v-for bằng :

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

3. Hiệu ứng Di chuyển

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

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}


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

4. Hiệu ứng Điều chỉnh Thứ tự Danh sách

Bằng cách truyền thông với các hiệu ứng chuyển tiếp JavaScript qua các thuộc tính dữ liệu, cũng có thể điều chỉnh thứ tự chuyển tiếp trong một danh sách. Trước hết, chúng ta hiển thị chỉ mục của một mục 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 hooks JavaScript, chúng ta tạo hiệu ứng cho phần tử với một độ trễ dựa trên thuộc tính dữ liệu. Ví dụ này sử dụng thư viện GSAP để thực hiện hiệu ứng:


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

Ví dụ Đầy đủ trong Playground

Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM