Vue系列之 => 動畫
阿新 • • 發佈：2018-12-25
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>vue動畫</title> 8 <script src="./lib/jquery2.1.4.min.js"></script> 9<script src="./lib/Vue2.5.17.js"></script> 10 <!-- 2，自定義兩組樣式，來控制tranition內部的元素實現動畫 --> 11 <style> 12 /* v-enter 是進入之前，元素的起始狀態，此時還沒有開始進入動畫 */ 13 /* v-leave-to 是動畫離開之後，離開的終止狀態，此時元素動畫已經結束 */ 14 .v-enter,.v-leave-to{ 15 opacity: 0; 16 transform:translateX(150px);17 } 18 /* v-enter-active 入場動畫的時間段 */ 19 /* v-leave-active 離場動畫時間段*/ 20 .v-enter-active,.v-leave-active{ 21 transition: all 0.8s ease; 22 } 23 /* 另外一組 算定義v-字首 toptodown */ 24 .toptodown-enter,.toptodown-leave-to{ 25 opacity: 0;26 transform:translateY(150px); 27 } 28 .toptodown-enter-active,.toptodown-leave-active{ 29 transition: all 0.8s ease; 30 } 31 </style> 32 </head> 33 <body> 34 <!-- <div id="app"> 35 <input type="button" value="toggle" @click="flag=!flag"> 36 <h3 v-if="flag">這是一個h3</h3> 37 </div> --> 38 <div id="app"> 39 <input type="button" value="toggle" @click="flag=!flag"> 40 <!-- 1，使用transition元素，把需要被動畫控制的元素包裹 --> 41 <!-- transition元素是vue官網提供的 --> 42 <transition> 43 <h3 v-if="flag">這是一個h3</h3> 44 </transition> 45 <div class="a"> 46 <input type="button" value="toggle2" @click="flag2=!flag2"> 47 <!-- 此處算定義transition name屬性值為toptodown --> 48 <transition name="toptodown"> 49 <h4 v-if="flag2">這是一個h4</h4> 50 </transition> 51 </div> 52 </div> 53 <script> 54 // new的vue例項，會控制這個元素 55 var vm = new Vue({ 56 el: '#app', 57 data: { 58 flag: false, 59 flag2: false 60 }, 61 methods: { } 62 }); 63 </script> 64 </body> 65 </html>