<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.ball{
width:15px;
height:15px;
border-radius:50%;
background: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>
var vm=new Vue({
el:"#app",
data:{
flag:false
},
methods:{
//动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素是个原声带JS DOM对象，可以认为el是通过document.getElementById('')这种方式获得到的
beforeEnter(el){
console.log("动画开始");
el.style.transform="translate(0,0)"
},
enter(el,done){
//这句话没有实际作用，但是不写却出不来实际的动画效果，可以认为el.offsetWidth会强制动画刷新，和offset相关的都可以，例如offsetLeft这些
el.offsetWidth;
el.style.transform="translate(150px,450px)";
el.style.transition="all 3s ease";
//这里的done，其实就是afterEnter这个函数
done();
},
afterEnter(el){
//this.flag=false;，第一个功能是控制小球的显示与隐藏；第二个功能就是直接跳过后半场动画，让flag标识符直接变为false;
console.log("动画结束");
this.flag=false;
//Vue把一个完整的动画使用钩子函数拆分成了两部分：
//我们使用flag标识符，来表示动画的切换
//刚一开始flag从false变为true,从true再变成false;
}
}
})
</script>
</body>
</html>
