vue钩子函数模拟半场动画
作者：互联网
2019年8月16日
钩子函数主要就是这三个函数
/* 注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素， 是个原生的JS DOM对象 */
/*相当于document.getElememtById('')获取的*/
/*beforeEnete表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中，设置元素开始动画之前的起始样式*/
beforeEnter(el){
el.style.transform="translate(0,0)" /*设置小球的起始位置*/
},
/*enter表示动画开始之后的样式，这里可以设置小球完成后的结束状态*/
enter(el,done){
el.offsetWidth /*可以认为强制动画刷新*/
el.style.transform="translate(150px,450px)"
el.style.transition='all 0.4s ease'
done() /*这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用*/
},
afterEnter(el){
this.flag=false
} /*动画完成之后的事件*/
钩子函数模拟小球半场动画的代码
<!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="js/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
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag">
</transition>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{
/* 注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素， 是个原生的JS DOM对象 */
/*相当于document.getElememtById('')获取的*/
/*beforeEnete表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中，设置元素开始动画之前的起始样式*/
beforeEnter(el){
el.style.transform="translate(0,0)" /*设置小球的起始位置*/
},
/*enter表示动画开始之后的样式，这里可以设置小球完成后的结束状态*/
enter(el,done){
el.offsetWidth /*可以认为强制动画刷新*/
el.style.transform="translate(150px,450px)"
el.style.transition='all 0.4s ease'
done() /*这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用*/
},
afterEnter(el){
this.flag=false
} /*动画完成之后的事件*/
}
});
</script>
</body>
</html>
标签：动画,style,vue,函数,半场,el,钩子,afterEnter,done 来源： https://blog.csdn.net/wmiaopas/article/details/99683054