初始渲染的過渡

可以通過 appear 特性設置節點在初始渲染的過渡

這裡默認和進入/離開過渡一樣，同樣也可以自定義 CSS 類名。

自定義 JavaScript 鉤子：

多個元素的過渡

我們之後討論多個組件的過渡，對於原生標籤可以使用 v-if/v-else 。最常見的多標籤過渡是一個列表和描述這個列表為空消息的元素：

可以這樣使用，但是有一點需要注意：

當有相同標籤名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標籤內部的內容。即使在技術上沒有必要，給在 組件中的多個元素設置 key 是一個更好的實踐。

示例：

在一些場景中，也可以通過給同一個元素的 key 特性設置不同的狀態來代替 v-if 和 v-else，上面的例子可以重寫為：

使用多個 v-if 的多個元素的過渡可以重寫為綁定了動態屬性的單個元素過渡。例如：

可以重寫為：

過渡模式

這裡還有一個問題，下面的按鈕：

在 “on” 按鈕和 “off” 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。這是 的默認行為 - 進入和離開同時發生。

在元素絕對定位在彼此之上的時候運行正常：

然後，我們加上 translate 讓它們運動像滑動過渡：

同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了 過渡模式

• in-out: 新元素先進行過渡，完成之後當前元素過渡離開。
• out-in: 當前元素先進行過渡，完成之後新元素過渡進入。

用 out-in 重寫之前的開關按鈕過渡：

只用添加一個簡單的特性，就解決了之前的過渡問題而無需任何額外的代碼。

in-out 模式不是經常用到，但對於一些稍微不同的過渡效果還是有用的。

將之前滑動淡出的例子結合：

多個組件的過渡

多個組件的過渡簡單很多 - 我們不需要使用 key 特性。相反，我們只需要使用動態組件：

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

關鍵字: 編程語言 JavaScript 技術