單元素/組件的過渡

• 過渡的類名
• CSS 過渡
• CSS 動畫
• 自定義過渡的類名
• 同時使用過渡和動畫
• 顯性的過渡持續時間
• JavaScript 鉤子

??Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡

• 條件渲染 (使用 v-if)
• 條件展示 (使用 v-show)
• 動態組件
• 組件根節點

這里是一個典型的例子：

<div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition> </div> new Vue({el: '#demo',data: {show: true} }) .fade-enter-active, .fade-leave-active {transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0; }

??當插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理：

• 自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。
• 如果過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
• 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的 nextTick 概念不同)

過渡的類名

??在進入/離開的過渡中，會有 6 個 class 切換。

• v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除。
• v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
• v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之后移除。
• v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
• v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
• v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之后移除。

??對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter。

v-enter-active 和 v-leave-active 可以控制進入/離開過渡的不同的緩和曲線，在下面會有個示例說明。

CSS 過渡

常用的過渡都是使用 CSS 過渡。

下面是一個簡單例子：

<div id="example-1"><button @click="show = !show">Toggle render</button><transition name="slide-fade"><p v-if="show">hello</p></transition> </div> new Vue({el: '#example-1',data: {show: true} }) /* 可以設置不同的進入和離開動畫 */ /* 設置持續時間和動畫函數 */ .slide-fade-enter-active {transition: all .3s ease; } .slide-fade-leave-active {transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ {transform: translateX(10px);opacity: 0; }

CSS 動畫

??CSS 動畫用法同 CSS 過渡，區別是在動畫中 v-enter 類名在節點插入 DOM 后不會立即刪除，而是在 animationend 事件觸發時刪除。
示例：

<div id="example-2"><button @click="show = !show">Toggle show</button><transition name="bounce"><p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p></transition> </div> new Vue({el: '#example-2',data: {show: true} }) .bounce-enter-active {animation: bounce-in .5s; } .bounce-leave-active {animation: bounce-in .5s reverse; } @keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);} }

自定義過渡的類名

??我們可以通過以下特性來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)
  ??他們的優先級高于普通的類名，這對于 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。
  示例：

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><div id="example-3"><button @click="show = !show">Toggle render</button><transitionname="custom-classes-transition"enter-active-class="animated tada"leave-active-class="animated bounceOutRight"><p v-if="show">hello</p></transition> </div> new Vue({el: '#example-3',data: {show: true} })

同時使用過渡和動畫

??Vue 為了知道過渡的完成，必須設置相應的事件監聽器。它可以是 transitionend 或 animationend ，這取決于給元素應用的 CSS 規則。如果你使用其中任何一種，Vue 能自動識別類型并設置監聽。

??但是，在一些場景中，你需要給同一個元素同時設置兩種過渡動效，比如 animation 很快的被觸發并完成了，而 transition 效果還沒結束。在這種情況中，你就需要使用 type 特性并設置 animation 或 transition 來明確聲明你需要 Vue 監聽的類型。

顯性的過渡持續時間

??在很多情況下，Vue 可以自動得出過渡效果的完成時機。默認情況下，Vue 會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件。然而也可以不這樣設定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。

??在這種情況下你可以用 <transition> 組件上的 duration 屬性定制一個顯性的過渡持續時間 (以毫秒計)：

<transition :duration="1000">...</transition>

你也可以定制進入和移出的持續時間：

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

JavaScript 鉤子

可以在屬性中聲明 JavaScript 鉤子

<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled" ><!-- ... --> </transition> // ... methods: {// --------// 進入中// --------beforeEnter: function (el) {// ...},// 當與 CSS 結合使用時// 回調函數 done 是可選的enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// --------// 離開時// --------beforeLeave: function (el) {// ...},// 當與 CSS 結合使用時// 回調函數 done 是可選的leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...} }

??這些鉤子函數可以結合 CSS transitions/animations 使用，也可以單獨使用。
??當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。
??推薦對于僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。

一個使用 Velocity.js 的簡單例子：

<!-- Velocity 和 jQuery.animate 的工作方式類似，也是用來實現 JavaScript 動畫的一個很棒的選擇 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><div id="example-4"><button @click="show = !show">Toggle</button><transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:leave="leave"v-bind:css="false"><p v-if="show">Demo</p></transition> </div> new Vue({el: '#example-4',data: {show: false},methods: {beforeEnter: function (el) {el.style.opacity = 0el.style.transformOrigin = 'left'},enter: function (el, done) {Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })Velocity(el, { fontSize: '1em' }, { complete: done })},leave: function (el, done) {Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })Velocity(el, { rotateZ: '100deg' }, { loop: 2 })Velocity(el, {rotateZ: '45deg',translateY: '30px',translateX: '30px',opacity: 0}, { complete: done })}} })

總結

以上是生活随笔為你收集整理的Vue单元素/组件的过渡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。