進入/離開 & 列表過渡 · VueJS官方離線文檔(搬運版)

## 概述 Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。包括以下工具： - 在 CSS 過渡和動畫中自動應用 class - 可以配合使用第三方 CSS 動畫庫，如 Animate.css - 在過渡鉤子函數中使用 JavaScript 直接操作 DOM - 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js 在這里，我們只會講到進入、離開和列表的過渡，你也可以看下一節的 [管理過渡狀態](transitioning-state.html)。 ## 單元素/組件的過渡 Vue 提供了 `transition` 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡 - 條件渲染 (使用 `v-if`) - 條件展示 (使用 `v-show`) - 動態組件 - 組件根節點這里是一個典型的例子： ``` html <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> ``` ``` js new Vue({ el: '#demo', data: { show: true } }) ``` ``` css .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } ``` {% raw %} <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="demo-transition"> <p v-if="show">hello</p> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> <style> .demo-transition-enter-active, .demo-transition-leave-active { transition: opacity .5s } .demo-transition-enter, .demo-transition-leave-to { opacity: 0 } </style> {% endraw %} 當插入或刪除包含在 `transition` 組件中的元素時，Vue 將會做以下處理： 1. 自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。 2. 如果過渡組件提供了 [JavaScript 鉤子函數](#JavaScript-鉤子)，這些鉤子函數將在恰當的時機被調用。 3. 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的 `nextTick` 概念不同) ### 過渡的類名在進入/離開的過渡中，會有 6 個 class 切換。 1. `v-enter`：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除。 2. `v-enter-active`：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。 3. `v-enter-to`: **2.1.8版及以上** 定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時 `v-enter` 被移除)，在過渡/動畫完成之后移除。 4. `v-leave`: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。 5. `v-leave-active`：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。 6. `v-leave-to`: **2.1.8版及以上** 定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效 (與此同時 `v-leave` 被刪除)，在過渡/動畫完成之后移除。 ![Transition Diagram](/images/transition.png) 對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 `<transition>`，則 `v-` 是這些類名的默認前綴。如果你使用了 `<transition name="my-transition">`，那么 `v-enter` 會替換為 `my-transition-enter`。 `v-enter-active` 和 `v-leave-active` 可以控制進入/離開過渡的不同的緩和曲線，在下面章節會有個示例說明。 ### CSS 過渡常用的過渡都是使用 CSS 過渡。下面是一個簡單例子： ``` html <div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> ``` ``` js new Vue({ el: '#example-1', data: { show: true } }) ``` ``` css /* 可以設置不同的進入和離開動畫 */ /* 設置持續時間和動畫函數 */ .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; } ``` {% raw %} <div id="example-1" class="demo"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> <script> new Vue({ el: '#example-1', data: { show: true } }) </script> <style> .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 { transform: translateX(10px); opacity: 0; } </style> {% endraw %} ### CSS 動畫 CSS 動畫用法同 CSS 過渡，區別是在動畫中 `v-enter` 類名在節點插入 DOM 后不會立即刪除，而是在 `animationend` 事件觸發時刪除。示例：(省略了兼容性前綴) ``` html <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> ``` ``` js new Vue({ el: '#example-2', data: { show: true } }) ``` ``` css .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); } } ``` {% raw %} <div id="example-2" class="demo"> <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> <style> .bounce-enter-active { -webkit-animation: bounce-in .5s; animation: bounce-in .5s; } .bounce-leave-active { -webkit-animation: bounce-in .5s reverse; animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes bounce-in { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } </style> <script> new Vue({ el: '#example-2', data: { show: true } }) </script> {% endraw %} ### 自定義過渡的類名我們可以通過以下特性來自定義過渡類名： - `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](https://daneden.github.io/animate.css/) 結合使用十分有用。示例： ``` html <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> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div> ``` ``` js new Vue({ el: '#example-3', data: { show: true } }) ``` {% raw %} <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <div id="example-3" class="demo"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div> <script> new Vue({ el: '#example-3', data: { show: true } }) </script> {% endraw %} ### 同時使用過渡和動畫 Vue 為了知道過渡的完成，必須設置相應的事件監聽器。它可以是 `transitionend` 或 `animationend` ，這取決于給元素應用的 CSS 規則。如果你使用其中任何一種，Vue 能自動識別類型并設置監聽。但是，在一些場景中，你需要給同一個元素同時設置兩種過渡動效，比如 `animation` 很快的被觸發并完成了，而 `transition` 效果還沒結束。在這種情況中，你就需要使用 `type` 特性并設置 `animation` 或 `transition` 來明確聲明你需要 Vue 監聽的類型。 ### 顯性的過渡持續時間 > 2.2.0 新增在很多情況下，Vue 可以自動得出過渡效果的完成時機。默認情況下，Vue 會等待其在過渡效果的根元素的第一個 `transitionend` 或 `animationend` 事件。然而也可以不這樣設定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。在這種情況下你可以用 `<transition>` 組件上的 `duration` 屬性定制一個顯性的過渡持續時間 (以毫秒計)： ``` html <transition :duration="1000">...</transition> ``` 你也可以定制進入和移出的持續時間： ``` html <transition :duration="{ enter: 500, leave: 800 }">...</transition> ``` ### JavaScript 鉤子可以在屬性中聲明 JavaScript 鉤子 ``` html <transition v-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> ``` ``` js // ... 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` 使用，也可以單獨使用。 <p class="tip">當只用 JavaScript 過渡的時候，**在 `enter` 和 `leave` 中必須使用 `done` 進行回調**。否則，它們將被同步調用，過渡會立即完成。</p> <p class="tip">推薦對于僅使用 JavaScript 過渡的元素添加 `v-bind:css="false"`，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。</p> 一個使用 Velocity.js 的簡單例子： ``` html  <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> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show"> Demo </p> </transition> </div> ``` ``` js new Vue({ el: '#example-4', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.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 }) } } }) ``` {% raw %} <div id="example-4" class="demo"> <button @click="show = !show"> Toggle </button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" > <p v-if="show"> Demo </p> </transition> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script> new Vue({ el: '#example-4', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.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 }) } } }) </script> {% endraw %} ## 初始渲染的過渡可以通過 `appear` 特性設置節點在初始渲染的過渡 ``` html <transition appear>  </transition> ``` 這里默認和進入/離開過渡一樣，同樣也可以自定義 CSS 類名。 ``` html <transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" (2.1.8+) appear-active-class="custom-appear-active-class" >  </transition> ``` 自定義 JavaScript 鉤子： ``` html <transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" >  </transition> ``` ## 多個元素的過渡我們之后討論[多個組件的過渡](#多個組件的過渡)，對于原生標簽可以使用 `v-if`/`v-else` 。最常見的多標簽過渡是一個列表和描述這個列表為空消息的元素： ``` html <transition> <table v-if="items.length > 0">  </table> <p v-else>Sorry, no items found.</p> </transition> ``` 可以這樣使用，但是有一點需要注意： <p class="tip">當有**相同標簽名**的元素切換時，需要通過 `key` 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，**給在 `<transition>` 組件中的多個元素設置 key 是一個更好的實踐。**</p> 示例： ``` html <transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition> ``` 在一些場景中，也可以通過給同一個元素的 `key` 特性設置不同的狀態來代替 `v-if` 和 `v-else`，上面的例子可以重寫為： ``` html <transition> <button v-bind:key="isEditing"> {{ isEditing ? 'Save' : 'Edit' }} </button> </transition> ``` 使用多個 `v-if` 的多個元素的過渡可以重寫為綁定了動態屬性的單個元素過渡。例如： ``` html <transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button> </transition> ``` 可以重寫為： ``` html <transition> <button v-bind:key="docState"> {{ buttonMessage }} </button> </transition> ``` ``` js // ... computed: { buttonMessage: function () { switch (this.docState) { case 'saved': return 'Edit' case 'edited': return 'Save' case 'editing': return 'Cancel' } } } ``` ### 過渡模式這里還有一個問題，試著點擊下面的按鈕： {% raw %} <div id="no-mode-demo" class="demo"> <transition name="no-mode-fade"> <button v-if="on" key="on" @click="on = false"> on </button> <button v-else key="off" @click="on = true"> off </button> </transition> </div> <script> new Vue({ el: '#no-mode-demo', data: { on: false } }) </script> <style> .no-mode-fade-enter-active, .no-mode-fade-leave-active { transition: opacity .5s } .no-mode-fade-enter, .no-mode-fade-leave-active { opacity: 0 } </style> {% endraw %} 在 "on" 按鈕和 "off" 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。這是 `<transition>` 的默認行為 - 進入和離開同時發生。在元素絕對定位在彼此之上的時候運行正常： {% raw %} <div id="no-mode-absolute-demo" class="demo"> <div class="no-mode-absolute-demo-wrapper"> <transition name="no-mode-absolute-fade"> <button v-if="on" key="on" @click="on = false"> on </button> <button v-else key="off" @click="on = true"> off </button> </transition> </div> </div> <script> new Vue({ el: '#no-mode-absolute-demo', data: { on: false } }) </script> <style> .no-mode-absolute-demo-wrapper { position: relative; height: 18px; } .no-mode-absolute-demo-wrapper button { position: absolute; } .no-mode-absolute-fade-enter-active, .no-mode-absolute-fade-leave-active { transition: opacity .5s; } .no-mode-absolute-fade-enter, .no-mode-absolute-fade-leave-active { opacity: 0; } </style> {% endraw %} 然后，我們加上 translate 讓它們運動像滑動過渡： {% raw %} <div id="no-mode-translate-demo" class="demo"> <div class="no-mode-translate-demo-wrapper"> <transition name="no-mode-translate-fade"> <button v-if="on" key="on" @click="on = false"> on </button> <button v-else key="off" @click="on = true"> off </button> </transition> </div> </div> <script> new Vue({ el: '#no-mode-translate-demo', data: { on: false } }) </script> <style> .no-mode-translate-demo-wrapper { position: relative; height: 18px; } .no-mode-translate-demo-wrapper button { position: absolute; } .no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active { transition: all 1s; } .no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active { opacity: 0; } .no-mode-translate-fade-enter { transform: translateX(31px); } .no-mode-translate-fade-leave-active { transform: translateX(-31px); } </style> {% endraw %} 同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了 **過渡模式** - `in-out`：新元素先進行過渡，完成之后當前元素過渡離開。 - `out-in`：當前元素先進行過渡，完成之后新元素過渡進入。用 `out-in` 重寫之前的開關按鈕過渡： ``` html <transition name="fade" mode="out-in">  </transition> ``` {% raw %} <div id="with-mode-demo" class="demo"> <transition name="with-mode-fade" mode="out-in"> <button v-if="on" key="on" @click="on = false"> on </button> <button v-else key="off" @click="on = true"> off </button> </transition> </div> <script> new Vue({ el: '#with-mode-demo', data: { on: false } }) </script> <style> .with-mode-fade-enter-active, .with-mode-fade-leave-active { transition: opacity .5s } .with-mode-fade-enter, .with-mode-fade-leave-active { opacity: 0 } </style> {% endraw %} 只用添加一個簡單的特性，就解決了之前的過渡問題而無需任何額外的代碼。 `in-out` 模式不是經常用到，但對于一些稍微不同的過渡效果還是有用的。將之前滑動淡出的例子結合： {% raw %} <div id="in-out-translate-demo" class="demo"> <div class="in-out-translate-demo-wrapper"> <transition name="in-out-translate-fade" mode="in-out"> <button v-if="on" key="on" @click="on = false"> on </button> <button v-else key="off" @click="on = true"> off </button> </transition> </div> </div> <script> new Vue({ el: '#in-out-translate-demo', data: { on: false } }) </script> <style> .in-out-translate-demo-wrapper { position: relative; height: 18px; } .in-out-translate-demo-wrapper button { position: absolute; } .in-out-translate-fade-enter-active, .in-out-translate-fade-leave-active { transition: all .5s; } .in-out-translate-fade-enter, .in-out-translate-fade-leave-active { opacity: 0; } .in-out-translate-fade-enter { transform: translateX(31px); } .in-out-translate-fade-leave-active { transform: translateX(-31px); } </style> {% endraw %} 很酷吧？ ## 多個組件的過渡多個組件的過渡簡單很多 - 我們不需要使用 `key` 特性。相反，我們只需要使用[動態組件](components.html#動態組件)： ``` html <transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component> </transition> ``` ``` js new Vue({ el: '#transition-components-demo', data: { view: 'v-a' }, components: { 'v-a': { template: '<div>Component A</div>' }, 'v-b': { template: '<div>Component B</div>' } } }) ``` ``` css .component-fade-enter-active, .component-fade-leave-active { transition: opacity .3s ease; } .component-fade-enter, .component-fade-leave-to /* .component-fade-leave-active for below version 2.1.8 */ { opacity: 0; } ``` {% raw %} <div id="transition-components-demo" class="demo"> <input v-model="view" type="radio" value="v-a" id="a" name="view"><label for="a">A</label> <input v-model="view" type="radio" value="v-b" id="b" name="view"><label for="b">B</label> <transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component> </transition> </div> <style> .component-fade-enter-active, .component-fade-leave-active { transition: opacity .3s ease; } .component-fade-enter, .component-fade-leave-to { opacity: 0; } </style> <script> new Vue({ el: '#transition-components-demo', data: { view: 'v-a' }, components: { 'v-a': { template: '<div>Component A</div>' }, 'v-b': { template: '<div>Component B</div>' } } }) </script> {% endraw %} ## 列表過渡目前為止，關于過渡我們已經講到： - 單個節點 - 同一時間渲染多個節點中的一個那么怎么同時渲染整個列表，比如使用 `v-for` ？在這種場景中，使用 `<transition-group>` 組件。在我們深入例子之前，先了解關于這個組件的幾個特點： - 不同于 `<transition>`，它會以一個真實元素呈現：默認為一個 `<span>`。你也可以通過 `tag` 特性更換為其他元素。 - [過渡模式](#過渡模式)不可用，因為我們不再相互切換特有的元素。 - 內部元素 **總是需要** 提供唯一的 `key` 屬性值。 ### 列表的進入/離開過渡現在讓我們由一個簡單的例子深入，進入和離開的過渡使用之前一樣的 CSS 類名。 ``` html <div id="list-demo" class="demo"> <button v-on:click="add">Add</button> <button v-on:click="remove">Remove</button> <transition-group name="list" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-item"> {{ item }} </span> </transition-group> </div> ``` ``` js new Vue({ el: '#list-demo', data: { items: [1,2,3,4,5,6,7,8,9], nextNum: 10 }, methods: { randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, } }) ``` ``` css .list-item { display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(30px); } ``` {% raw %} <div id="list-demo"> <button v-on:click="add">Add</button> <button v-on:click="remove">Remove</button> <transition-group name="list" tag="p"> <span v-for="item in items" :key="item" class="list-item"> {{ item }} </span> </transition-group> </div> <script> new Vue({ el: '#list-demo', data: { items: [1,2,3,4,5,6,7,8,9], nextNum: 10 }, methods: { randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, } }) </script> <style> .list-item { display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to { opacity: 0; transform: translateY(30px); } </style> {% endraw %} 這個例子有個問題，當添加和移除元素的時候，周圍的元素會瞬間移動到他們的新布局的位置，而不是平滑的過渡，我們下面會解決這個問題。 ### 列表的排序過渡 `<transition-group>` 組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的 ** `v-move` 特性**，它會在元素的改變定位的過程中應用。像之前的類名一樣，可以通過 `name` 屬性來自定義前綴，也可以通過 `move-class` 屬性手動設置。 `v-move` 對于設置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子： ``` html <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <div id="flip-list-demo" class="demo"> <button v-on:click="shuffle">Shuffle</button> <transition-group name="flip-list" tag="ul"> <li v-for="item in items" v-bind:key="item"> {{ item }} </li> </transition-group> </div> ``` ``` js new Vue({ el: '#flip-list-demo', data: { items: [1,2,3,4,5,6,7,8,9] }, methods: { shuffle: function () { this.items = _.shuffle(this.items) } } }) ``` ``` css .flip-list-move { transition: transform 1s; } ``` {% raw %} <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <div id="flip-list-demo" class="demo"> <button v-on:click="shuffle">Shuffle</button> <transition-group name="flip-list" tag="ul"> <li v-for="item in items" :key="item"> {{ item }} </li> </transition-group> </div> <script> new Vue({ el: '#flip-list-demo', data: { items: [1,2,3,4,5,6,7,8,9] }, methods: { shuffle: function () { this.items = _.shuffle(this.items) } } }) </script> <style> .flip-list-move { transition: transform 1s; } </style> {% endraw %} 這個看起來很神奇，內部的實現，Vue 使用了一個叫 [FLIP](https://aerotwist.com/blog/flip-your-animations/) 簡單的動畫隊列使用 transforms 將元素從之前的位置平滑過渡新的位置。我們將之前實現的例子和這個技術結合，使我們列表的一切變動都會有動畫過渡。 ``` html <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <div id="list-complete-demo" class="demo"> <button v-on:click="shuffle">Shuffle</button> <button v-on:click="add">Add</button> <button v-on:click="remove">Remove</button> <transition-group name="list-complete" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-complete-item" > {{ item }} </span> </transition-group> </div> ``` ``` js new Vue({ el: '#list-complete-demo', data: { items: [1,2,3,4,5,6,7,8,9], nextNum: 10 }, methods: { randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, shuffle: function () { this.items = _.shuffle(this.items) } } }) ``` ``` css .list-complete-item { transition: all 1s; display: inline-block; margin-right: 10px; } .list-complete-enter, .list-complete-leave-to /* .list-complete-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(30px); } .list-complete-leave-active { position: absolute; } ``` {% raw %} <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <div id="list-complete-demo" class="demo"> <button v-on:click="shuffle">Shuffle</button> <button v-on:click="add">Add</button> <button v-on:click="remove">Remove</button> <transition-group name="list-complete" tag="p"> <span v-for="item in items" :key="item" class="list-complete-item"> {{ item }} </span> </transition-group> </div> <script> new Vue({ el: '#list-complete-demo', data: { items: [1,2,3,4,5,6,7,8,9], nextNum: 10 }, methods: { randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, shuffle: function () { this.items = _.shuffle(this.items) } } }) </script> <style> .list-complete-item { transition: all 1s; display: inline-block; margin-right: 10px; } .list-complete-enter, .list-complete-leave-to { opacity: 0; transform: translateY(30px); } .list-complete-leave-active { position: absolute; } </style> {% endraw %} <p class="tip">需要注意的是使用 FLIP 過渡的元素不能設置為 `display: inline` 。作為替代方案，可以設置為 `display: inline-block` 或者放置于 flex 中</p> FLIP 動畫不僅可以實現單列過渡，多維網格也[同樣可以過渡](https://jsfiddle.net/chrisvfritz/sLrhk1bc/)： {% raw %} <div id="sudoku-demo" class="demo"> <strong>Lazy Sudoku</strong> <p>Keep hitting the shuffle button until you win.</p> <button @click="shuffle"> Shuffle </button> <transition-group name="cell" tag="div" class="sudoku-container"> <div v-for="cell in cells" :key="cell.id" class="cell"> {{ cell.number }} </div> </transition-group> </div> <script> new Vue({ el: '#sudoku-demo', data: { cells: Array.apply(null, { length: 81 }) .map(function (_, index) { return { id: index, number: index % 9 + 1 } }) }, methods: { shuffle: function () { this.cells = _.shuffle(this.cells) } } }) </script> <style> .sudoku-container { display: flex; flex-wrap: wrap; width: 238px; margin-top: 10px; } .cell { display: flex; justify-content: space-around; align-items: center; width: 25px; height: 25px; border: 1px solid #aaa; margin-right: -1px; margin-bottom: -1px; } .cell:nth-child(3n) { margin-right: 0; } .cell:nth-child(27n) { margin-bottom: 0; } .cell-move { transition: transform 1s; } </style> {% endraw %} ### 列表的交錯過渡通過 data 屬性與 JavaScript 通信，就可以實現列表的交錯過渡： ``` html <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id="staggered-list-demo"> <input v-model="query"> <transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" > <li v-for="(item, index) in computedList" v-bind:key="item.msg" v-bind:data-index="index" >{{ item.msg }}</li> </transition-group> </div> ``` ``` js new Vue({ el: '#staggered-list-demo', data: { query: '', list: [ { msg: 'Bruce Lee' }, { msg: 'Jackie Chan' }, { msg: 'Chuck Norris' }, { msg: 'Jet Li' }, { msg: 'Kung Fury' } ] }, computed: { computedList: function () { var vm = this return this.list.filter(function (item) { return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 }) } }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.height = 0 }, enter: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity( el, { opacity: 1, height: '1.6em' }, { complete: done } ) }, delay) }, leave: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity( el, { opacity: 0, height: 0 }, { complete: done } ) }, delay) } } }) ``` {% raw %} <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id="example-5" class="demo"> <input v-model="query"> <transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" > <li v-for="(item, index) in computedList" v-bind:key="item.msg" v-bind:data-index="index" >{{ item.msg }}</li> </transition-group> </div> <script> new Vue({ el: '#example-5', data: { query: '', list: [ { msg: 'Bruce Lee' }, { msg: 'Jackie Chan' }, { msg: 'Chuck Norris' }, { msg: 'Jet Li' }, { msg: 'Kung Fury' } ] }, computed: { computedList: function () { var vm = this return this.list.filter(function (item) { return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 }) } }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.height = 0 }, enter: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity( el, { opacity: 1, height: '1.6em' }, { complete: done } ) }, delay) }, leave: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity( el, { opacity: 0, height: 0 }, { complete: done } ) }, delay) } } }) </script> {% endraw %} ## 可復用的過渡過渡可以通過 Vue 的組件系統實現復用。要創建一個可復用過渡組件，你需要做的就是將 `<transition>` 或者 `<transition-group>` 作為根組件，然后將任何子組件放置在其中就可以了。使用 template 的簡單例子： ``` js Vue.component('my-special-transition', { template: '\ <transition\ name="very-special-transition"\ mode="out-in"\ v-on:before-enter="beforeEnter"\ v-on:after-enter="afterEnter"\ >\ <slot></slot>\ </transition>\ ', methods: { beforeEnter: function (el) { // ... }, afterEnter: function (el) { // ... } } }) ``` 函數組件更適合完成這個任務： ``` js Vue.component('my-special-transition', { functional: true, render: function (createElement, context) { var data = { props: { name: 'very-special-transition', mode: 'out-in' }, on: { beforeEnter: function (el) { // ... }, afterEnter: function (el) { // ... } } } return createElement('transition', data, context.children) } }) ``` ## 動態過渡在 Vue 中即使是過渡也是數據驅動的！動態過渡最基本的例子是通過 `name` 特性來綁定動態值。 ``` html <transition v-bind:name="transitionName">  </transition> ``` 當你想用 Vue 的過渡系統來定義的 CSS 過渡/動畫在不同過渡間切換會非常有用。所有過渡特性都可以動態綁定，但我們不僅僅只有特性可以利用，還可以通過事件鉤子獲取上下文中的所有數據，因為事件鉤子都是方法。這意味著，根據組件的狀態不同，你的 JavaScript 過渡會有不同的表現。 ``` html <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id="dynamic-fade-demo" class="demo"> Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration"> Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration"> <transition v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" > <p v-if="show">hello</p> </transition> <button v-if="stop" v-on:click="stop = false; show = false" >Start animating</button> <button v-else v-on:click="stop = true" >Stop it!</button> </div> ``` ``` js new Vue({ el: '#dynamic-fade-demo', data: { show: true, fadeInDuration: 1000, fadeOutDuration: 1000, maxFadeDuration: 1500, stop: true }, mounted: function () { this.show = false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 }, enter: function (el, done) { var vm = this Velocity(el, { opacity: 1 }, { duration: this.fadeInDuration, complete: function () { done() if (!vm.stop) vm.show = false } } ) }, leave: function (el, done) { var vm = this Velocity(el, { opacity: 0 }, { duration: this.fadeOutDuration, complete: function () { done() vm.show = true } } ) } } }) ``` 最后，創建動態過渡的最終方案是組件通過接受 props 來動態修改之前的過渡。一句老話，唯一的限制是你的想象力。