此文首發於 lijing0906.github.io

網頁中，一般都存在切換的場景，vue提供了一個簡單的切換過渡效果，用< transition>標籤包裹要切換的部分即可。

多元素過渡

繫結key

vue官網上有寫到：

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

示例程式碼：

    <transition>
        <button v-if="isEditing" key="save">Save</button>
        <button v-else key="edit">Edit</button>
    </transition>
複製程式碼

上面栗子可以簡寫為：

    <transition>
        <button :key="isEditing">{{isEditing ? 'Save' : 'Edit'}}</button>
    </transition>
複製程式碼

過渡模式

vue提供兩種過渡模式

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

    <transition mode="in-out" name="fade">
        <!-- name屬性的值是便於寫樣式 -->
    </transition>
複製程式碼

多元件過渡

多個元件過渡，就不需要 key 特性，使用動態元件就OK