直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!--2. 自定義兩組樣式，來控制transition 內部的元素實現動畫--> <style> /*v-enter 是進入之前，元素的起始狀態*/ /*v-leave-to 離開之后動畫的終止狀態*/ .v-enter,.v-leave-to{ opacity: 0;/*透明度*/ transform: translateX(150px); } /*入場(離場)動畫的時間段 */ .v-enter-active,.v-leave-active{ transition: all 0.8s ease; } .my-enter,.my-leave-to{ opacity: 0;/*透明度*/ transform: translateY(70px); } .my-enter-active,.my-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <input type="button" value="toggle2" @click="flag2=!flag2"> <!--1. 使用transition元素把需要被動畫控制的元素，包裹起來--> <transition> <h3 v-if="flag">這是一個H3</h3> </transition> <transition name="my"> <!--區分不同組織間動畫--> <h6 v-if="flag2">這是一個H6</h6> </transition> </div> <script> var vm = new Vue({ el : '#app', data : { flag : false, flag2 : false, }, methods : { }, }); </script> </body> </html>