學習要點：
1.轉場效果
本節課我們來開始學習 Vue3.x 的動畫和轉場效果的簡單演示。
一．轉場效果
1. 動畫效果并不是 Vue 的核心功能，這里簡單的了解下即可，原因如下：
(1) . 內容不難，但繁雜(主要 CSS 調用多)；
(2) . 學了一個，其它的參考手冊，對應著搭建即可完成效果；
2. 我們就選擇一個講解即可，“進場和離場”效果用的比較多一些；
3. 創建一個按鈕、要切換進場和離場的內容，以及設置默認顯示的屬性；
<div id="app">
<p v-if="show">顯示/隱藏p>
<button>切換{{show}}button>
div>
data() {
return {
show : true
}
}
4. 用一個表達式來實現簡單的布爾值的切換功能，具體如下：
<button v-on:click="show = !show">切換{{show}}button>
5. 構建所需進場和離場的 CSS，推薦復制官方的，然后根據自己需求修改；
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
style>
6. 最后一步，使用 Vue 的效果組件來實現過渡效果；
<transition name="fade">
<p v-if="show">顯示/隱藏p>
transition>
PS：這是手冊上的第一個小案例，我們一句句分析一下；
(1) .show : true，用于判斷 dom 節點 p 狀態；
(2) .show = !show，注意這里不是!=，而是!show，表示 show=true|false；
(3) .是 Vue 過渡動畫組件，包含在里面才能實現動畫效果；
(4) .name=fade，定義 CSS 樣式的前綴名稱，都已 fade 為前綴；
PS：在進入過渡或離開的過程中，有 6 種 class 可供切換，沒有 name 默認為 v：
(1) .v-enter：進入過渡的開始狀態；
(2) .v-enter-active：進入過渡的生效狀態；
(3) .v-enter-to：進入過渡的結束狀態；
(4) .v-leave：離開過渡的開始狀態；
(5) .v-leave-active：離開過渡的生效狀態；
(6) .v-leave-to：離開過渡的結束狀態；
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
