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 background-color: red; 16 border-radius: 50%; 17 } 18 </style> 19 </head> 20 21 <body> 22 <div id="app"> 23 <input type="button" value="接入购物车" @click="flag=!flag"> 24 25 <transition 26 @before-enter="beforeEnter" 27 @enter="enter" 28 @after-enter="afterEnter"> 29 <div class="ball" v-show="flag"></div> 30 </transition> 31 </div> 32 33 <script> 34 //创建 Vue 实例，得到 ViewModel 35 var vm = new Vue({ 36 el:'#app', 37 data:{ 38 flag:false 39 }, 40 methods:{ 41 beforeEnter(el){ 42 el.style.transform='translate(0,0)' 43 }, 44 enter(el,done){ 45 el.offsetWidth 46 el.style.transform='translate(150px,450px)' 47 el.style.transition="all 1s ease" 48 done() 49 }, 50 afterEnter(el){ 51 //这句话，第一个功能，是控制小球的显示与隐藏 52 //第二个功能：直接跳过后半场动画，让flag标识符直接变为 false 53 //当第二次再点击 按钮的时候，flag false ->true 54 this.flag=!this.flag 55 // el.style.opacity=0.5 56 57 //Vue 把一个完整的动画，使用钩子函数，拆分为了两部分； 58 //我们使用 flag 标识符，来表示动画的切换； 59 //刚开始，flag= false ->true ->false 60 } 61 } 62 }); 63 </script> 64 </body> 65 </html>