在本文中，我們將研究如何建立基本的轉場效果和動畫。
過渡單個元素/元件當從DOM中新增，更新或刪除元素時，Vue為我們提供了多種方法來應用過渡效果。它可以執行的操作包括：
自動應用類的CSS過渡和動畫整合第三方CSS動畫庫在過渡期間使用JavaScript直接操作DOM整合第三方JavaScript動畫庫Vue具有 transition 包裝器元件，可讓我們在以下上下文中為元素或元件新增進入和離開過渡：
v-if 條件渲染v-show 顯示動態元件元件根節點例如，我們可以定義一個簡單的淡入淡出過渡，如下所示：
src/index.js :
new Vue({ el: "#app", data: { show: false }});src/styles.css：
.fade-enter-active,.fade-leave-active { transition: opacity 0.5s;}.fade-enter,.fade-leave-to { opacity: 0;}index.html：
<div id="app"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hi</p> </transition></div><script src="src/index.js"></script>在上面的程式碼中，我們將 name 屬性設定為 fade。
這意味著在CSS程式碼中，我們必須在我們的類前面加上 fade 的字首。
在程式碼中：
.fade-enter-active,.fade-leave-active { transition: opacity 0.5s;}.fade-enter,.fade-leave-to { opacity: 0;}enter-active，leave-active，enter和 leave-to 是Vue的預設類名字尾，用於確定適用於各種過渡狀態的樣式。
Transition Classes有6個類別可用於進入/離開轉換：
v-enter——進入的起始狀態。在元素插入之前新增，在元素插入後一幀刪除。v-enter-active——進入活動狀態，在整個進入階段應用。在元素插入之前新增，過渡完成後將其刪除。此類可用於延遲和緩和進入過渡。v-enter-to——自Vue 2.1.8起可用，輸入的結束狀態。插入元素後添加了一幀，這與移除 v-enter 相同。過渡完成後刪除。v-leave——離開的開始狀態。離開時觸發新增，一幀後將其刪除。v-leave-active——離開的活動狀態，並在整個離開階段應用。離開過渡時新增觸發，過渡結束後刪除。此類可用於延遲和緩和進入過渡。v-leave-to——從Vue 2.1.8開始提供，離開結束狀態。觸發離開轉換後新增一幀，同時刪除 v-leave。它在轉換完成時被刪除。整個工作流程如下：
v- 是未設定名稱屬性時的預設字首。否則，將 v- 替換為我們設定的名稱。在上面的示例中，我們將 v- 替換為 fade-。
CSS Transitions我們可以指定CSS過渡，如下所示：
src/index.js
new Vue({ el: "#app", data: { show: false }});src/style.css :
.fade-enter-active { transition: all 0.3s ease;}.fade-leave-active { transition: all 0.8s cubic-bezier(0.3, 0.5, 0.8, 1);}.fade-enter,.fade-leave-to { transform: translateX(15px); opacity: 0;}index.html :
<body> <div id="app"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hi</p> </transition> </div> <script src="src/index.js"></script></body>在上面的程式碼中，我們在切換文字時滑動文字。我們還定義了漸隱效果的的緩動。
我們用三次貝塞爾曲線改變相位的速度，引數是行內用於滑動文字的點。
當使用 v-if 切換內容時，我們可以建立一個跳動的動畫效果，如下所示：
src/index.js
new Vue({ el: "#app", data: { show: false }});src/styles.css :
.bounce-enter-active { animation: bounce-in 1s;}.bounce-leave-active { animation: bounce-in 0.75s reverse;}@keyframes bounce-in { 0% { transform: scale(1.5); } 50% { transform: scale(0.6); } 100% { transform: scale(1); }}index.html:
<body> <div id="app"> <button v-on:click="show = !show"> Toggle </button> <transition name="bounce"> <p v-if="show">hi</p> </transition> </div> <script src="src/index.js"></script></body>動畫程式碼位於 src/styles.css 中，其中我們定義了彈跳動畫(bounce-in)的關鍵幀，以按比例縮放(scale)和擠壓文字。小於1表示擠壓大於1表示拉伸。
總結我們可以通過為Vue用來渲染過渡的各種類設定CSS樣式來定義基本的進入和離開過渡。
另外，我們可以為其定義動畫和關鍵幀，以看到與使用過渡類相同的效果。
唯一的不同是 v-enter 不會在元素插入後立即刪除，而是在 animationend 事件上刪除。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。