1、钩子函数实现半场动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<style>
.ball{
15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="加入购物车" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
//2.创建一个vue实例
var vm = new Vue({
el: '#app', //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
flag:false,
msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
},
methods:{
//el表示要执行动画的Dom元素，beforeEnter表示动画起始位置
beforeEnter(el){
el.style.transform = "translate(0,0)"
},
//enter表示动画之后的样式，这个可以设置小球完成动画的结束状态
enter(el,done){
el.offsetWidth
el.style.transform ="translate(150px,450px)"
el.style.transition= 'all 1s ease'
//done()让动画立即消失。这个done就是afterEnter函数的引用
done()
},
//动画完成之后
afterEnter(el){
// this.flag = !this.flag
}
}
})
</script>
</body>
</html>