Vue系列之 => 模擬購物車新增小球動畫
阿新 • • 發佈：2018-12-31
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>Document</title> 8 <script src="./lib/jquery2.1.4.min.js"></script> 9<! 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/jquery2.1.4.min.js"></ script> < script src= "./lib/Vue2.5.17.js"></ script> < link href= "https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel= "stylesheet"> < style> .ball { width: 15 px; height: 15 px; border-radius: 50 %; background-color: red; } </ style> </ head> < body> < div id= "app"> < input type= "button" value= "加入" @click= "flag=!flag"> <!-- 使用transition元素把小玩包起來 --> < transition @before-enter= "beforeEnter" @enter= "enter" @after-enter= "afterEnter" > < div class= "ball" v-show= "flag"></ div> </ transition> </ div> < script> var vm = new Vue({ el : '#app', data : { flag : false }, methods: { //注意，動畫鉤子函式的第一個引數：el表示要執行動畫的那個DOM元素，是個原生的JS物件。 beforeEnter( el){ //beforeEnter表示動畫入場之前，此時動畫尚未開始可以在beforeEnter中設定元素開始動畫之前的起始樣式。 //設定小球開始動畫之前的起始位置 el.style.transform = 'translate(0,0)' }, enter( el, done){ //設定過渡 el.offsetWidth //enter表示動畫開始之後的樣式，這裡可以設定小球完成動畫之後的結束狀態 el.style.transform = 'translate(150px,450px)' el.style.transition = 'all 1s ease' //這裡的done其實就是afterEnter這個函式，也就是說done是一個函式的引用 done() }, afterEnter( el){ console. log( 'aaa'); this.flag = ! this.flag }, }, }) </ script> </ body> </ html> <! 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/jquery2.1.4.min.js"></ script> < script src= "./lib/Vue2.5.17.js"></ script> < link href= "https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel= "stylesheet"> < style> .ball { width: 15 px; height: 15 px; border-radius: 50 %; background-color: red; } </ style> </ head> < body> < div id= "app"> < input type= "button" value= "加入" @click= "flag=!flag"> <!-- 使用transition元素把小玩包起來 --> < transition @before-enter= "beforeEnter" @enter= "enter" @after-enter= "afterEnter" > < div class= "ball" v-show= "flag"></ div> </ transition> </ div> < script> var vm = new Vue({ el : '#app', data : { flag : false }, methods: { //注意，動畫鉤子函式的第一個引數：el表示要執行動畫的那個DOM元素，是個原生的JS物件。 beforeEnter( el){ //beforeEnter表示動畫入場之前，此時動畫尚未開始可以在beforeEnter中設定元素開始動畫之前的起始樣式。 //設定小球開始動畫之前的起始位置 el.style.transform = 'translate(0,0)' }, enter( el, done){ //設定過渡 el.offsetWidth //enter表示動畫開始之後的樣式，這裡可以設定小球完成動畫之後的結束狀態 el.style.transform = 'translate(150px,450px)' el.style.transition = 'all 1s ease' //這裡的done其實就是afterEnter這個函式，也就是說done是一個函式的引用 done() }, afterEnter( el){ console. log( 'aaa'); this.flag = ! this.flag }, }, }) </ script> </ body> </ html><script src="./lib/Vue2.5.17.js"></script> 10 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 11 <style> 12 .ball { 13 width: 15px; 14 height: 15px; 15 border-radius: 50%; 16 background-color: red;17 } 18 </style> 19 </head> 20 <body> 21 <div id="app"> 22 <input type="button" value="加入" @click="flag=!flag"> 23 <!-- 使用transition元素把小玩包起來 --> 24 <transition 25 @before-enter="beforeEnter" 26 @enter="enter" 27@after-enter="afterEnter" 28 > 29 <div class="ball" v-show="flag"></div> 30 </transition> 31 </div> 32 <script> 33 var vm = new Vue({ 34 el : '#app', 35 data : { 36 flag : false 37 }, 38 methods: { 39 //注意，動畫鉤子函式的第一個引數：el表示要執行動畫的那個DOM元素，是個原生的JS物件。 40 beforeEnter(el){ 41 //beforeEnter表示動畫入場之前，此時動畫尚未開始可以在beforeEnter中設定元素開始動畫之前的起始樣式。 42 //設定小球開始動畫之前的起始位置 43 el.style.transform = 'translate(0,0)' 44 }, 45 enter(el,done){ 46 //設定過渡 47 el.offsetWidth 48 //enter表示動畫開始之後的樣式，這裡可以設定小球完成動畫之後的結束狀態 49 el.style.transform = 'translate(150px,450px)' 50 el.style.transition = 'all 1s ease' 51 //這裡的done其實就是afterEnter這個函式，也就是說done是一個函式的引用 52 done() 53 }, 54 afterEnter(el){ 55 console.log('aaa'); 56 this.flag = !this.flag 57 }, 58 }, 59 }) 60 </script> 61 </body> 62 </html>