动画钩子函数
v-on:before-enter
:表示动画入场之前,此时,动画尚未开始,可以在 before-enter中,设置元素。开始动画之前的其实样式。v-on:enter
:表示动画,开始之后的样式,可以设置完成动画的结束状态v-on:after-enter
:表示动画完成后的状态v-on:enter-cancelled
:用于取消开始动画
添加购物车半场动画例子
<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"
>
例子:
<!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>小球动画</title>
<script src="../lib/vue.js"></script>
</head>
<style>
.ball{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
<body>
<div id="app">
<input type="button" value="加入" @click="flag=!flag">
<transition v-on:before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-show="flag" class="ball"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意:动画钩子函数的第一个参数:el ,表示 要执行动画的那个DOM元素
// 是个原生的 JS DOM对象。(大家可以认为,el 是通过 document.getElementById('') 方式获取得到的原生JS DOM对象)
beforeEnter: function (el) {
// before-enter 表示动画入场之前,此时,动画尚未开始,可以在 before-enter中,设置元素
// 开始动画之前的起始样式
// 设置小球开始动画之前的 起始位置
el.style.transform = "translate(0,0)"
},
enter: function (el, done) {
// 下边这句话没有实际的作用,但是如果不写,出不来动画效果
// 可以认为 el.offsetWidth 会强制动画刷新(有width 就有height、left,只要跟offset有关都可以)
el.offsetWidth;
// enter 表示动画,开始之后的样式,这里可以设置小球完成动画之后的结束状态
el.style.transform = "translate(150px,350px)";
el.style.transition = "all 1s ease";
// 这里的done 其实就是 after-enter函数,也就是说:done 是 after-enter函数的引用(回调相当于引用执行after-enter函数)
done()
},
afterEnter(el) {
// 动画完成之后,会调用的 after-enter 函数
this.flag = !this.flag; //做完,动画没有立即消失,如果立即消失,必须在enter函数中,加done参数
}
}
})
</script>
</body>
</html>