如果想要实现自定义动画，此时就要用到 动画钩子函数
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
利用钩子函数实现了一个小球的动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<style>
.ball{
width:20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
</style>
<body>
<!--需求：点击按钮让H3显示 再点击让H3隐藏-->
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div v-if="flag" class="ball"></div>
</transition>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{
/*第一个参数el 表示要执行动画的那个DOM元素，是个原生的JS DOM对象*/
/*可以认为 el是通过document.getElementById() 获取的*/
beforeEnter(el){
//表示动画入场之前 此时动画尚未开始 可以在beforeEnter中 设置元素开始动画之前的起始样式
el.style.transform="translate(0,0)"
},
enter(el,done){
//el.offsetWidth没有实际的作用，但是，如果不写，出不来动画效果；
//可以认为，el.offsetWidth 会强制动画刷新
el.offsetWidth
//动画开始之后的样式，可以设置小球完成动画之后的 结束状态
el.style.transform="translate(150px,450px)";
el.style.transition="all 0.6s ease"
//这里的done 其实就是 afterEnter这个函数，也就是说，done是afterEnter函数的引用
done()
},
afterEnter(el){
//动画完成之后
this.flag=!this.flag
}
}
})
</script>
</html>
网友评论