Transition ​

Vue cung cấp hai thành phần tích hợp sẵn có thể giúp làm việc với các chuyển động và hoạt ảnh phản ứng đối với trạng thái thay đổi:

• <Transition> để áp dụng hoạt ảnh khi một phần tử hoặc thành phần được thêm vào và rời khỏi DOM. Điều này được thảo luận trên trang này.

• <TransitionGroup> để áp dụng hoạt ảnh khi một phần tử hoặc thành phần được chèn vào, loại bỏ khỏi hoặc di chuyển trong một danh sách v-for. Điều này được thảo luận trong chương tiếp theo.

Ngoài hai thành phần này, chúng ta cũng có thể áp dụng hoạt ảnh trong Vue bằng các kỹ thuật khác như chuyển đổi các lớp CSS hoặc hoạt ảnh dựa trên trạng thái thông qua các ràng buộc kiểu dáng. Các kỹ thuật bổ sung này được thảo luận trong chương Kỹ thuật Hoạt ảnh.

Thành phần <Transition> ​

<Transition> là một thành phần tích hợp sẵn: điều này có nghĩa là nó có sẵn trong bất kỳ mẫu thành phần nào mà không cần đăng ký. Nó có thể được sử dụng để áp dụng hoạt ảnh nhập và rời khỏi trên các phần tử hoặc thành phần được chuyển đến nó thông qua khe mặc định của nó. Quá trình nhập hoặc rời đi có thể được kích hoạt bởi một trong những cách sau:

• Hiển thị có điều kiện thông qua v-if
• Hiển thị có điều kiện thông qua v-show
• Chuyển đổi thành phần động thông qua phần tử đặc biệt <component>
• Thay đổi thuộc tính key đặc biệt

Dưới đây là một ví dụ về cách sử dụng cơ bản nhất:

<button @click="show = !show">Chuyển đổi</button>
<Transition>
  <p v-if="show">xin chào</p>
</Transition>

/* chúng tôi sẽ giải thích những lớp này làm gì kế tiếp! */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

Khi một phần tử trong thành phần <Transition> được chèn hoặc loại bỏ, điều này sẽ xảy ra:

1. Vue sẽ tự động kiểm tra xem phần tử mục tiêu có áp dụng chuyển động hoặc hoạt ảnh CSS không. Nếu có, một số lớp chuyển động CSS sẽ được thêm / loại bỏ vào đúng thời điểm.

2. Nếu có người nghe cho các hooks JavaScript, những hooks này sẽ được gọi đúng thời điểm.

3. Nếu không phát hiện chuyển động

/ hoạt ảnh CSS và không có người nghe JavaScript được cung cấp, các hoạt động DOM cho việc chèn và/hoặc loại bỏ sẽ được thực hiện vào khung hoạt ảnh tiếp theo của trình duyệt.

Chuyển động Dựa trên CSS ​

Các Lớp Chuyển Động ​

Có sáu lớp được áp dụng cho các chuyển động nhập / rời đi.

1. v-enter-from: Trạng thái ban đầu cho chuyển động nhập. Thêm vào trước khi phần tử được chèn, loại bỏ một khung hình sau khi phần tử được chèn.

2. v-enter-active: Trạng thái hoạt động cho chuyển động nhập. Áp dụng trong suốt giai đoạn nhập đầy đủ. Thêm vào trước khi phần tử được chèn, loại bỏ khi chuyển động/hoạt ảnh kết thúc. Lớp này có thể được sử dụng để định nghĩa thời gian, độ trễ và đường cong dễ dàng cho chuyển động nhập.

3. v-enter-to: Trạng thái kết thúc cho chuyển động nhập. Thêm vào một khung hình sau khi phần tử được chèn (cùng một thời điểm v-enter-from bị loại bỏ), loại bỏ khi chuyển động/hoạt ảnh kết thúc.

4. v-leave-from: Trạng thái ban đầu cho chuyển động rời đi. Thêm vào ngay khi một chuyển động rời bắt đầu, loại bỏ sau một khung hình.

5. v-leave-active: Trạng thái hoạt động cho chuyển động rời đi. Áp dụng trong suốt giai đoạn rời đi đầy đủ. Thêm vào ngay khi chuyển động rời bắt đầu, loại bỏ khi chuyển động/hoạt ảnh kết thúc. Lớp này có thể được sử dụng để định nghĩa thời gian, độ trễ và đường cong dễ dàng cho chuyển động rời đi.

6. v-leave-to: Trạng thái kết thúc cho chuyển động rời đi. Thêm vào một khung hình sau khi chuyển động rời bắt đầu (cùng một thời điểm v-leave-from bị loại bỏ), loại bỏ khi chuyển động/hoạt ảnh kết thúc.

v-enter-active và v-leave-active mang lại khả năng chỉ định các đường cong dễ dàng khác nhau cho các chuyển động nhập / rời đi, mà chúng ta sẽ thấy một ví dụ trong các phần tiếp theo.

Chuyển Động có Tên ​

Một chuyển động có thể được đặt tên thông qua thuộc tính name:

<Transition name="fade">
  ...
</Transition>

Đối với một chuyển động có tên, các lớp chuyển động của nó sẽ được tiếp đầu ngữ với tên của nó thay vì v. Ví dụ, lớp được áp dụng cho chuyển động trên sẽ là fade-enter-active thay vì v-enter-active. CSS cho chuyển động mờ nên trông như sau:

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

Chuyển Động CSS ​

<Transition> thường được sử dụng phổ biến nhất khi kết hợp với chuyển động CSS nguyên bản, như được thấy trong ví dụ cơ bản ở trên. Thuộc tính CSS transition là một rút gọn cho phép chúng ta chỉ định nhiều khía cạnh của một chuyển động, bao gồm các thuộc tính cần được ho

ạt động, thời gian chuyển động và đường cong dễ dàng.

Dưới đây là một ví dụ phức tạp hơn chuyển động qua nhiều thuộc tính, với các khoảng thời gian và đường cong dễ dàng khác nhau cho chuyển động nhập và rời đi:

<Transition name="slide-fade">
  <p v-if="show">hello</p>
</Transition>

/*
  Chuyển động nhập và rời có thể sử dụng
  thời gian và hàm định thời khác nhau.
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

Chuyển Động CSS ​

Chuyển động CSS nguyên bản được áp dụng theo cách tương tự như chuyển động CSS, với sự khác biệt là *-enter-from không được loại bỏ ngay sau khi phần tử được chèn, mà là sau một sự kiện animationend.

Đối với hầu hết các chuyển động CSS, chúng ta có thể đơn giản chỉ định chúng dưới các lớp *-enter-active và *-leave-active. Dưới đây là một ví dụ:

<Transition name="bounce">
  <p v-if="show" style="text-align: center;">
    Hello here is some bouncy text!
  </p>
</Transition>

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

Các Lớp Chuyển Động Tùy Chỉnh ​

Bạn cũng có thể chỉ định các lớp chuyển động tùy chỉnh bằng cách truyền các thuộc tính sau cho <Transition>:

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

Những lớp này sẽ ghi đè lên các tên lớp thông thường. Điều này đặc biệt hữu ích khi bạn muốn kết hợp hệ thống chuyển động của Vue với một thư viện chuyển động CSS hiện tại, như Animate.css:

<!-- giả sử Animate.css đã được bao gồm trong trang -->
<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

Sử Dụng Chuyển Động và Hoạt Ảnh Cùng Nhau ​

Vue cần gắn kết nghe sự kiện để biết khi nào một chuyển động kết thúc. Điều này có thể là transitionend hoặc animationend, phụ thuộc vào loại quy tắc CSS được áp dụng. Nếu bạn chỉ sử dụng một trong hai, Vue có thể tự động xác định loại chính xác.

Tuy nhiên, trong một số trường hợp, bạn có thể muốn có cả hai trên cùng một phần tử, ví dụ như có một hoạt ảnh CSS được kích hoạt bởi Vue, cùng với một hiệu ứng chuyển động CSS khi di chuột qua. Trong những trường hợp này, bạn phải rõ ràng khai báo loại mà Vue quan tâm bằng cách truyền thuộc tính type, với giá trị là animation hoặc transition:

<Transition type="animation">...</Transition>

Chuyển Động Lồng Nhau và Độ Dài Chuyển Động Rõ Ràng ​

Mặc dù các lớp chuyển động chỉ được áp dụng cho phần tử con trực tiếp trong <Transition>, chúng ta có thể chuyển động các phần tử lồng nhau bằng cách sử dụng các bộ chọn CSS lồng nhau:

<Transition name="nested">
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>

/* quy tắc dành cho các phần tử lồng nhau */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

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

/* ... bỏ qua các CSS cần thiết khác */

Chúng ta có thể thậm chí thêm độ trễ vào phần tử lồng nhau khi vào, tạo ra một chuỗi hoạt ảnh vào có độ trễ:

/* độ trễ vào của phần tử lồng nhau để tạo hiệu ứng độ trễ */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

Tuy nhiên, điều này tạo ra một vấn đề nhỏ. Mặc định, thành phần <Transition> cố gắng tự động xác định khi chuyển động kết thúc bằng cách lắng nghe sự kiện đầu tiên transitionend hoặc animationend trên phần tử chuyển động gốc. Với một chuyển động lồng nhau, hành vi mong muốn là đợi cho đến khi tất cả các chuyển động của các phần tử con đã kết thúc.

Trong những trường hợp như vậy, bạn có thể chỉ định một độ dài chuyển động rõ ràng (theo mili giây) bằng cách sử dụng thuộc tính duration trên thành phần <transition>. Tổng thời gian phải phù hợp với độ trễ cộng thời gian chuyển động của phần tử con:

<Transition :duration="550">...</Transition>

[Thử nghiệm ở Playground](https://play.vuejs.org/#eNqVVd9v0zAQ/leO8LAfrE3HNKSFbgKmSYMHQNAHkPLiOtfEm2NHttN2mvq/c7bTNi1jgFop9t13d9995ziPyfumGc5bTLJkbLkRjQOLrm2uciXqRhsHj2BwBiuYGV3DAUEPcpUrrpUlaKUXcOkBh860eJSrcRqzUDxtHNaNZA5pBzCets5pBe+4FPz+Mk+66Bf+mSdXE12WEsdphMWQiWHKCicoLCtaw/yKIs/PR3kCitVIG4XWYUEJfATFFGIO84GYdRUIyCWzlra6dWg2wA66dgqlts7c+d8tSqk34JTQ6xqb9TjdUiTDOO21TFvrHqRfDkPpExiGKvBITjdl/L40ulVFBi8R8a3P17CiEKrM4GzULIOlFmpQoSgrl8HpKFpX3kFZu2y0BNhJxznvwaJCA1TEYcC4E3MkKp1VIptjZ43E3KajDJiUMBqeWUBmcUBUqJGYOT2GAiV7gJAA9Iy4GyoBKLH2z+N0W3q/CMC2yCCkyajM63Mbc+9z9mfvZD+b071MM23qLC69+j8PvX5HQUDdMC6cL7BOTtQXCJwpas/qHhWIBdYtWGgtDWNttWTmThu701pf1W6+v1Hd8Xbz+k+VQxmv8i7Fv1HZn+g/iv2nRkjzbd6npf/Rkz49DifQ3dLZBBYOJzC4rqgCwsUbmLYlCAUVU4XsCd1NrCeRHcYXb1IJC/RX2hEYCwJTvHYVMZoavbBI09FmU+LiFSzI

h0AIXy1mqZiFKaKCmVhiEVJ7GftHZTganUZ56EYLL3FykjhL195MlMM7qxXdmEGDPOG6boRE86UJVPMki+p4H01WLz4Fm78hSdBo5xXy+yfsd3bpbXny1SA1M8c82fgcMyW66L75/hmXtN44a120ktDPOL+h1bL1HCPsA42DaPdwge3HcO/TOCb2ZumQJtA15Yl65Crg84S+BdfPtL6lezY8C3GkZ7L6Bc1zNR0=)

Nếu cần, bạn cũng có thể chỉ định giá trị riêng cho độ dài vào và rời bằng một đối tượng:

<Transition :duration="{ enter: 500, leave: 800 }">...</Transition>

Xem Xét Hiệu Suất ​

Bạn có thể nhận thấy rằng các hoạt ảnh hiển thị ở trên chủ yếu sử dụng các thuộc tính như transform và opacity. Các thuộc tính này hiệu quả khi thực hiện hoạt ảnh vì:

1. Chúng không ảnh hưởng đến bố cục tài liệu trong suốt quá trình hoạt ảnh, do đó, chúng không kích hoạt việc tính toán bố cục CSS đắt tiền trên mỗi khung hoạt ảnh.

2. Hầu hết các trình duyệt hiện đại có thể tận dụng chế độ tăng tốc GPU khi thực hiện hoạt ảnh transform.

So với các thuộc tính như height hoặc margin, chúng sẽ kích hoạt bố cục CSS, nên chúng đắt tiền hơn khi thực hiện hoạt ảnh và nên được sử dụng cẩn thận. Bạn có thể kiểm tra các nguồn tài nguyên như CSS-Triggers để xem thuộc tính nào sẽ kích hoạt bố cục nếu chúng được thực hiện hoạt ảnh.

JavaScript Hooks ​

Bạn có thể kết nối vào quá trình chuyển động bằng JavaScript bằng cách lắng nghe sự kiện trên thành phần <Transition>:

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

// được gọi trước khi phần tử được chèn vào DOM.
// sử dụng để đặt trạng thái "enter-from" của phần tử
function onBeforeEnter(el) {}

// được gọi một khung hình sau khi phần tử được chèn vào.
// sử dụng để bắt đầu hoạt ảnh vào.
function onEnter(el, done) {
  // gọi callback done để chỉ định kết thúc chuyển động
  // tùy chọn nếu sử dụng kết hợp với CSS
  done()
}

// được gọi khi chuyển động vào kết thúc.
function onAfterEnter(el) {}

// được gọi khi chuyển động vào bị hủy trước khi hoàn thành.
function onEnterCancelled(el) {}

// được gọi trước khi hook rời đi.
// Hầu hết mọi thời điểm, bạn chỉ nên sử dụng hook rời đi
function onBeforeLeave(el) {}

// được gọi khi chuyển động rời đi bắt đầu.
// sử dụng để bắt đầu hoạt ảnh rời đi.
function onLeave(el, done) {
  // gọi callback done để chỉ định kết thúc chuyển động
  // tùy chọn nếu sử dụng kết hợp với CSS
  done()
}

// được gọi khi chuyển động rời đi kết thúc và
// phần tử đã được loại bỏ khỏi DOM.
function onAfterLeave(el) {}

// chỉ có sẵn với chuyển động với v-show
function onLeaveCancelled(el) {}

export default {
  // ...
  methods: {
    // được gọi trước khi phần tử được chèn vào DOM.
    // sử dụng để đặt trạng thái "enter-from" của phần tử
    onBeforeEnter(el) {},

    // được gọi một khung hình sau khi phần tử được chèn vào.
    // sử dụng để bắt đầu hoạt ảnh.
    onEnter(el, done) {
      // gọi callback done để chỉ định kết thúc chuyển động
      // tùy chọn nếu sử dụng kết hợp với CSS
      done()
    },

    // được gọi khi chuyển động vào kết thúc.
    onAfterEnter(el) {},
    onEnterCancelled(el) {},

    // được gọi trước khi hook rời đi.
    // Hầu hết mọi thời điểm, bạn chỉ nên sử dụng hook rời đi.
    onBeforeLeave(el) {},

    // được gọi khi chuyển động rời đi bắt đầu.
    // sử dụng để bắt đầu hoạt ảnh rời đi.
    onLeave(el, done) {
      // gọi callback done để chỉ định kết thúc chuyển động
      // tùy chọn nếu sử dụng kết hợp với CSS
      done()
    },

    // được gọi khi chuyển động rời đi kết thúc và
    // phần tử đã được loại bỏ khỏi DOM.
    onAfterLeave(el) {},

    // chỉ có sẵn với chuyển động với v-show
    onLeaveCancelled(el) {}
  }
}

Các hooks này có thể được sử dụng kết hợp với chuyển động/hoạt ảnh CSS hoặc tự nó.

Khi sử dụng chuyển động chỉ bằng JavaScript, thường là một ý tưởng tốt để thêm thuộc tính :css="false". Điều này tường minh báo cho Vue bỏ qua việc tự động phát hiện chuyển động CSS. Ngoài việc hiệu suất tốt hơn một chút, điều này cũng ngăn quy tắc CSS từ việc can thiệp ngẫu nhiên vào chuyển động:

<Transition
  ...
  :css="false"
>
  ...
</Transition>

Với :css="false", chúng ta cũng chịu trách nhiệm hoàn toàn để kiểm soát khi chuyển động kết thúc. Trong trường hợp này, các callback done là bắt buộc cho các hooks @enter và @leave. Nếu không, các hooks sẽ được gọi đồng bộ và chuyển động sẽ kết thúc ngay lập tức.

Dưới đây là một demo sử dụng thư viện GreenSock để thực hiện các hoạt ảnh. Tất nhiên, bạn cũng có thể sử dụng bất kỳ thư viện hoạt ảnh nào khác bạn muốn, ví dụ như Anime.js hoặc Motion One.

Reusable Transitions ​

Chuyển động có thể được tái sử dụng thông qua hệ thống component của Vue. Để tạo một chuyển động có thể tái sử dụng, chúng ta có thể tạo một component bao bọc thành phần <Transition> và truyền nội dung khe:

<!-- MyTransition.vue -->
<script>
// Logic các hooks JavaScript...
</script>

<template>
  <!-- bao bọc thành phần Transition tích hợp -->
  <Transition
    name="my-transition"
    @enter="onEnter"
    @leave="onLeave">
    <slot></slot> <!-- truyền nội dung khe xuống -->
  </Transition>
</template>

<style>
/*
  CSS cần thiết...
  Lưu ý: tránh sử dụng <style scoped> ở đây vì nó
  không áp dụng cho nội dung khe.
*/
</style>

Bây giờ, MyTransition có thể được import và sử dụng giống như phiên bản tích hợp sẵn:

<MyTransition>
  <div v-if="show">Hello</div>
</MyTransition>

Chuyển động khi Xuất hiện ​

Nếu bạn muốn áp dụng một chuyển động vào render ban đầu của một nút, bạn có thể thêm thuộc tính appear:

<Transition appear>
  ...
</Transition>

Chuyển động Giữa Các Phần Tử ​

Ngoài việc chuyển đổi một phần tử với v-if / v-show, chúng ta cũng có thể chuyển động giữa hai phần tử bằng cách sử dụng v-if / v-else / v-else-if, miễn là chúng ta đảm bảo rằng chỉ có một phần tử được hiển thị vào bất kỳ thời điểm nào:

<Transition>
  <button v-if="docState === 'saved'">Edit</button>
  <button v-else-if="docState === 'edited'">Save</button>
  <button v-else-if="docState === 'editing'">Cancel</button>
</Transition>

Thử nghiệm ở Playground

Chế Độ Chuyển Động ​

Trong ví dụ trước đó, các phần tử đang nhập và rời khỏi đồng thời, và chúng ta đã phải làm cho chúng trở thành position: absolute để tránh vấn đề bố trí khi cả hai phần tử xuất hiện trong DOM.

Tuy nhiên, trong một số trường hợp, điều này không phải là một lựa chọn, hoặc đơn giản là không phải là hành vi mong muốn. Chúng ta có thể muốn phần tử rời đi được chuyển động trước, và phần tử nhập chỉ được chèn sau khi chuyển động rời đi đã kết thúc. Việc điều chỉnh những chuyển động này một cách thủ công sẽ rất phức tạp - may mắn thay, chúng ta có thể bật chế độ này bằng cách truyền cho <Transition> một thuộc tính mode:

<Transition mode="out-in">
  ...
</Transition>

Dưới đây là demo trước đó với mode="out-in":

<Transition> cũng hỗ trợ mode="in-out", tuy nó ít được sử dụng hơn nhiều.

Chuyển Động Giữa Các Component ​

<Transition> cũng có thể được sử dụng xung quanh các component động:

<Transition name="fade" mode="out-in">
  <component :is="activeComponent"></component>
</Transition>

Chuyển Động Động ​

Các thuộc tính của <Transition> như name cũng có thể là động! Điều này cho phép chúng ta áp dụng động các chuyển động khác nhau dựa trên sự thay đổi trạng thái:

<Transition :name="transitionName">
  <!-- ... -->
</Transition>

Điều này có ích khi bạn đã định nghĩa các chuyển động / hoạt ảnh CSS bằng cách sử dụng quy ước lớp chuyển động của Vue và muốn chuyển đổi giữa chúng.

Bạn cũng có thể áp dụng hành vi khác nhau trong các hooks chuyển động JavaScript dựa trên trạng thái hiện tại của component của bạn. Cuối cùng, cách tốt nhất để tạo ra các chuyển động động là thông qua các component chuyển động có thể tái sử dụng chấp nhận các props để thay đổi bản chất của chuyển động(s) được sử dụng. Có thể nghe có vẻ là nhảm nhí, nhưng giới hạn thực sự chỉ là trí tưởng tượng của bạn.