使用vue模拟购物车小球动画
1.效果演示
2.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<script src="../js/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.ball {
15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flage=!flage">
<!--1.使用transition元素 把小球包裹起来-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="flage"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flage: false
},
methods: {
//钩子函数的第一个参数el:表示要执行动画的那个元素 是个原生的js dom对象
//document.getElementById() 可以认为他是通过这种方式获取的
beforeEnter:function (el) {
//beforeEnter表示动画入场之前 动画开始 可以再beforeEnter中设置元素的起始样式
//设置小球开始动画以前的起始位置
el.style.transform="translate(0,0)";
},
enter:function (el,done) {
//这句话没有实际的作用 但是不写出不来效果
//el.offsetWidth可以认为可以强制刷新动画
el.offsetWidth
//enter表示动画开始之后的样式这里可以设置小球完成动画之后的结束状态
el.style.transform="translate(150px,450px)";
el.style.transition="all 1s ease"
done()
},
afterEnter:function (el) {
//动画完成后
this.flage=!this.flage;
}
}
})
</script>
</body>
</html>