<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/js/vue.js"></script>
<style>
.ball{
20px;
height: 20px;
border-radius: 50%;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="加入购物车" @click="add">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-if="flag"></div>
</transition>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
add(){
this.flag = !this.flag
},
// 动画钩子函数的第一个参数：el 表示要执行动画的那个DOM元素，是个原生的JS DOM 对象
// 可以认为 el 是通过 document.getelementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
// beforeEnter 表示动画入场之前，此时动画尚未开始，可以在 beforeEnter中设置
// 开始动画之前的起始样式
// 设置小球开始动画之前的起始位置
el.style.transform = "translate(0,0)"
},
enter(el,done){
// 这句话没有实际的作用，但是不写出不来动画效果，可以认为el.offsetWidth会强制动画刷新
el.offsetWidth;
// enter 表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
el.style.transform = "translate(150px,400px)";
el.style.transition = "all 1s ease";
//这里的done其实就是afterEnter这个函数，也就是说，done是afterEnter函数的引用，
//如果不使用done，会延迟afterEnter中小球的消失
done()
},
afterEnter(el){
// console.log('ok');
// 动画完成之后会调用 afterEnter
this.flag = false
}
}
})
</script>
</body>
</html>