动画-钩子函数实现半场动画的介绍
- 入场函数和出场函数
<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="leaveCacelled"
>
- 钩子函数实现小球半场动画
methods: {
beforeEnter(el){
//设置小球开始动画之前的起始位置
el.style.transform = "translate(0,0)"
},
enter(el, done){
el.offsetWidth //没有实际的作用，但是不写没有动画效果
// enter表示动画 开始之后的样式，这里，可以设置小球完成动画之后的结束状态
el.style.transform = "translate(150px,450px)"
el.style.transition = 'all is ease'
done() //done()函数就是afterEnter函数，done是afterEnter函数的引用
},
afterEnter(el){ //动画完成之后调用的函数
this.flag = !this.flag
}
}
- 动画钩子函数的第一个参数: el，表示要执行动画的那个DOM元素 是个原生的JS DOM对象，可以认为el是通过document.getElementById()方式获取到的原生JSDom对象
- beforeEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
使用transition-group元素实现列表动画
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue动画</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
.ball {
background-color:red;
width: 50px;
height: 50px;
border-radius: 90%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" v-on:click="flag = !flag">
<!-- <div class="ball" v-show="flag"></div> -->
<transition
v-on:before-enter="beforeEnter"
v-on:enter = "enter"
v-on:after-enter="afterEnter"
>
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
beforeEnter(el){
//设置小球开始动画之前的起始位置
el.style.transform = "translate(0, 0)"
this.flag = true
},
enter(el, done){
el.offsetWidth //没有实际的作用，但是不写没有动画效果
// enter表示动画 开始之后的样式，这里，可以设置小球完成动画之后的结束状态
el.style.transform = "translate(150px,450px)"
el.style.transition = 'all 2s ease'
done() //done()函数就是afterEnter函数，done是afterEnter函数的引用
},
afterEnter(el){ //动画完成之后调用的函数
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
网友评论