Vue，動畫-使用過度類名實現動畫（漸變）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <!-- p45 --> 8 <script src="../js/vue.js"></script> 9 <!-- 2. 自定義兩組樣式， 來控制 transition 內部的元素實現動畫 --> 10 <style> 11 /* v-enter 這是一個時間點 是進入之前, 元素的起始狀態, 此時還沒有開始進入 */ 12 /* v-leave-to 這是一個時間點 是動畫離開之后, 離開的終止狀態, 此時, 元素 動畫已經結束了 */ 13 .v-enter, 14 .v-leave-to{ 15 /* 透明度為0 */ 16 opacity: 0; 17 /* 位移(x) */ 18 transform: translateX(180px); 19 } 20 21 /* v-enter-active [入場動畫的時間段] */ 22 /* v-leave-active [離場動畫的時間段] */ 23 .v-enter-active, 24 .v-leave-active{ 25 /* 漸變 */ 26 transition: all 1s ease; 27 } 28 </style> 29 <body> 30 <div id="app"> 31 <input type="button" value="toggle" @click="flag=!flag"> 32 <!-- 需求: 點擊按鈕， 讓 h3 顯示， 再點擊， 讓 h3 隱藏 --> 33 <!-- 使用 transition 元素， 把 需要被動畫控制的元素， 包裹起來 --> 34 <!-- transition 元素， 是 Vue 官方提供的 --> 35 <transition> 36 <h3 v-if="flag">這是一個h3</h3> 37 </transition> 38 39 </div> 40 41 </body> 42 </html> 43 <script> 44 var vm = new Vue({ 45 el:'#app', 46 data:{ 47 flag: false 48 }, 49 methods:{ 50 51 } 52 }) 53 </script>
效果圖
官方文檔
