<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../01基础/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<style>
#ball{
width: 15px;
height: 15px;
red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="加入购物车" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="ball" v-show="flag"></div>
</transition>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el: ‘#app‘,
data: {
flag:false//显示的状态
},
methods: {
beforeEnter(el){
//小球开始动画之前的其实状态
el.style.transform="translate(0,0)"
},
enter(el,done){
//小球动画结束之后的结束状态
//这是固定写法，如果不写el.offserWidth就无法实现动画效果
el.offsetWidth
el.style.transform="translate(150px,300px)"
el.style.transition="all 1s ease"
// 当动画执行完毕后，会自动调用done这个函数，这个done就是after函数的引用
done()
},
afterEnter(el){
//小球结束动画之后的回调函数，用来做一些清理工作
this.flag=!this.flag
},
}
})
</script>
</body>
</html>
