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>
