Animation - Use the hook function simulation ball halftime animation
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> 8 <style type="text/css"> 9 .ball{ 10 height: 15px; 11 width: 15px; 12 background: red; 13 border-radius: 50%; 14 } 15 </style> 16 <body> 17 <div id="app"> 18 <input type="button" id="" value="快到碗里来" @click="flag =! flag"/> <! -19 1. 使用 transition 元素把小球 包裹起来 --> 20 <transition 21 @before-enter="beforeEnter" 22 @enter="enter" 23 @after-enter="afterEnter"> 24 <div class="ball" v-show="flag"></div> 25 </transition> 26 27 </div> 28 </body> 29 </html> 30 <script> 31 var VM = new new Vue ({ 32 EL: ' #app ' , 33 is Data: { 34 is In Flag: to false 35 }, 36 Methods: { 37 [ // NOTE: The first parameter animation hook function: el, indicates to perform animation that DOM element is the JS native DOM objects 38 is beforeEnter (EL) { 39 // before admission animated beforeEnter said case, the animation has not yet begun, may beforeEnter, set the element 40 // start before the beginning of the animation style 41 @ disposed ball animation starts, the starting position 42 is el.style.transform = "Translate (0, 0) " 43 is 44 is }, 45 Enter (EL, DONE) { 46 is 47 // phrase no practical effect, but, if not written, the actual results not get 48 // may be considered forces offsetWidth animation refresh 49 el.offsetWidth 50 // the Enter represents the style after the movie starts, where you can set the ball after the completion of the animation, ending the state of 51 el.style.transform = " Translate (150px, 450px) " 52 // after 1s reaches the actual position 53 is el.style.transition = ' All 1s EASE ' 54 is 55 //Done here is afterEnter starting function, that is to say: done is a function of a reference afterEnter 56 is done () 57 is }, 58 afterEnter (EL) { 59 the console.log ( " animation execution ends " ) 60 the this .flag = ! the this .flag 61 is } 62 is } 63 is }) 64 </ Script >
Renderings
Be sure to enter the call done in otherwise will not disappear immediately