Vue–使用钩子函数模拟小球半场动画
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="../lib/vue.js"></script>
<style>
.ball{
width: 15px;
height: 15px;
border-radius:50%;
background-color:red ;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="抛出" @click="flag=!flag">
<!--使用transition元素把小球包裹起来-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
// Vue.directive("focus",function(el){})
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{
//注意:动画钩子函数第一个参数:el,表示要执行动画的那个DOM元素,是个原生JS DOM对象
//可以认为el通过这种方式获取的原生对象---document.getelementByid('')
beforeEnter(el){
//beforeEnter表示动画入场前,此时,动画尚未开始,可以在beforeEnter中,设置元素开始动画之前的起始样式
el.style.transform="translate(0, 0)" //设置小球开始动画的起始位置
},
enter(el,done) {
//必须加下面一行,否则不会出现应有的效果
el.offsetWidth;//这里可以理解成强制浏览器刷新,也可以写el.offsetHeigh
//enter表示动画开始之后的样式,这里可以设置小球完成动画之后的,结束状态
el.style.transform="translate(150px,450px)" //终止位置
el.style.transition="all 1s ease" //过渡时间
done() //立即消失,防抖动
},
afterEnter(el){
//动画完成之后,回调用afterEnter
this.flag=!this.flag
}
}
});
</script>
</body>
</html>
效果图