列表的進入/離開過渡

現在讓我們由一個簡單的例子深入，進入和離開的過渡使用之前一樣的 CSS 類名。

這個例子有個問題，當添加和移除元素的時候，周圍的元素會瞬間移動到他們的新佈局的位置，而不是平滑的過渡，我們下面會解決這個問題。

列表的排序過渡

組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需瞭解新增的 v-move 特性，它會在元素的改變定位的過程中應用。像之前的類名一樣，可以通過 name 屬性來自定義前綴，也可以通過 move-class 屬性手動設置。

v-move 對於設置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：

這個看起來很神奇，內部的實現，Vue 使用了一個叫 FLIP 簡單的動畫隊列

使用 transforms 將元素從之前的位置平滑過渡新的位置。

我們將之前實現的例子和這個技術結合，使我們列表的一切變動都會有動畫過渡。

需要注意的是使用 FLIP 過渡的元素不能設置為 display: inline 。作為替代方案，可以設置為 display: inline-block 或者放置於 flex 中。

FLIP 動畫不僅可以實現單列過渡，多維網格也同樣可以過渡：

列表的交錯過渡

通過 data 屬性與 JavaScript 通信 ，就可以實現列表的交錯過渡：

可複用的過渡

過渡可以通過 Vue 的組件系統實現複用。要創建一個可複用過渡組件，你需要做的就是將 或者 作為根組件，然後將任何子組件放置在其中就可以了。

使用 template 的簡單例子：

動態過渡

在 Vue 中即使是過渡也是數據驅動的！動態過渡最基本的例子是通過 name 特性來綁定動態值。

當你想用 Vue 的過渡系統來定義的 CSS 過渡/動畫 在不同過渡間切換會非常有用。

所有的過渡特性都是動態綁定。它不僅是簡單的特性，通過事件的鉤子函數方法，可以在獲取到相應上下文數據。這意味著，可以根據組件的狀態通過 JavaScript 過渡設置不同的過渡效果。

最後，創建動態過渡的最終方案是組件通過接受 props 來動態修改之前的過渡。一句老話，唯一的限制是你的想象力。

閱讀更多 看到他請叫他快去學習 的文章

關鍵字: 編程語言 JavaScript 技術