<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.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 【離場動畫的時間段】 */ .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"> <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 --> <!-- 1. 使用 transition 元素，把 需要被動畫控制的元素，包裹起來 --> <!-- transition 元素，是 Vue 官方提供的 --> <transition> <h3 v-if="flag">這是一個H3</h3> </transition> <hr> <input type="button" value="toggle2" @click="flag2=!flag2"> <transition name="my"> <h6 v-if="flag2">這是一個H6</h6> </transition> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false, flag2: false }, methods: {} }); </script> </body> </html>