1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 <style> 12 .ball{ 13 width:15px; 14 height: 15px; 15 border-radius: 50%; 16 background-color: red; 17 18 } 19 20 </style> 21 </head> 22 23 <body> 24 <div id="app"> 25 <input type="button" value="快到碗里来" @click="flag=!flag"> 26 <!-- 1.使用transition元素把小球包裹起来 --> 27 <transition 28 @before-enter="beforeEnter" 29 @enter="enter" 30 @after-enter="afterEnter"> 31 <div class="ball" v-show="flag"></div> 32 </transition> 33 </div> 34 35 36 <script> 37 //创建 Vue 实例，得到 ViewModel 38 var vm = new Vue({ 39 el:'#app', 40 data:{ 41 flag:false 42 }, 43 methods:{ 44 //注意：动画钩子函数的第一个参数：el,表示要执行动画的哪个DOM元素，是个原生的JS DOM对象 45 //大家可以认为，el是通过 document.getElementById('') 方式获取到的原生JS DOM对象 46 beforeEnter(el){ 47 //beforeEnter 表示动画入场前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式 48 //设置小球开始动画之前的，起始位置 49 el.style.transform="translate(0,0)" 50 }, 51 enter(el,done){ 52 53 //这句话，没有实际的作用，但是，如果不写，出不来动画效果； 54 //可以认为el.offsetWidth 会强制动画刷新， 换成el.offsetHight el.offsetLeft el.offsetTop也是一样的效果，只要和offset相关的都可以 55 el.offsetWidth 56 //enter表示动画开始之后的样式，这里可以设置小球完成动画之后的，结束状态 57 el.style.transform="translate(150px,450px)" 58 el.style.transition='all 1s ease' 59 60 //这里的 done，起始就是afterEnter 这个函数，也就是说：done是afterEnter函数的引用 61 done() 62 }, 63 afterEnter(el){ 64 //动画完成之后，会调用 afterEnter 65 // console.log('ok') 66 this.flag=!this.flag 67 } 68 } 69 }); 70 </script> 71 </body> 72 </html>