11.使用過渡類名實現動畫
阿新 • • 發佈：2019-01-12
可參考Vue中的動畫：https://cn.vuejs.org/v2/guide/transitions.html
為什麼要有動畫：動畫能夠提高使用者的體驗，幫助使用者更好的理解頁面中的功能；
1.不使用動畫：
<!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> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <!-- 需求： 點選按鈕，讓 h3 顯示，再點選，讓 h3 隱藏 --> <h3 v-if="flag">這是一個H3</h3> </div> <script> // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: {} }); </script> </body> </html>
2.使用過渡類名實現動畫
<!DOCTYPE html> <html lang="en"View Code> <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; } </style> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <!-- 需求：點選按鈕，讓 h3 顯示，再點選，讓 h3 隱藏 --> <!-- 1. 使用transition元素(Vue官方提供)，把需要被動畫控制的元素包裹起來 --> <transition> <h3 v-if="flag">這是一個H3</h3> </transition> </div> <script> // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: {} }); </script> </body> </html>