Vue系列之 => 模拟购物车添加小球动画

 <!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: 15px;

             height: 15px;

             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>

<head>

<title>Document</title>

<style>

.ball {

width: px;

height: px;

border-radius: %;

background-color: red;

}

</style>

</head>

<body>

<transition

@before-enter="beforeEnter"

@enter="enter"

@after-enter="afterEnter"

</transition>

</div>

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>