点击加入购物车，会弹出一个紫色小球掉入购物车
<html>
<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></title>
<script src="Vue.min.js"></script>
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: blueviolet;
}
p {
position: absolute;
top: 455px;
left: 100px;
}
</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>
<p>假装这里有一个购物车</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
beforeEnter(el) {
el.style.transform = "translate(0,0)" //小球初始位置
},
enter(el, done) {
el.offsetWidth //动画过渡
el.style.transform = "translate(150px,450px)" //最终位置
el.style.transition = 'all 2s ease' //所花时间
done()
},
afterEnter(el) {
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
