### 1. 原理  ①動畫裝在 transition標簽中 ② transition 標簽的name為下方css的開頭 ③vue底層已進行封裝在不同的時間點會具有不同的class 通過樣式完成動畫 ④如圖點擊顯示和隱藏兩動畫都含有三個class 而 v-enter-to和v-leave是固定的opacity：1不予考慮 ### 2. 實現一個簡單的漸隱漸現動畫 ~~~ //css .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } .fade-leave-to{ opacity:0; } .fade-leave-active{ transition: opacity 4s; } <div id="app"> <transition name="fade"> <div v-if="isShow">hello world</div> </transition> <button @click="handleClick">切換</button> </div> new Vue({ el:"#app", data:{ isShow:false }, methods:{ handleClick(){ this.isShow = !this.isShow; } } }) ~~~