vue笔记-12（动画钩子函数）
2020-09-17 本文已影响0人
7ColorLotus
动画-钩子函数实现半场动画的介绍
- 入场函数和出场函数
<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元素实现列表动画
- 在实现列表过度的时候，如果需要过渡的元素，是通过v-for 循环渲染出来的，不能使用transition包裹，需要使用transition-group
- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置:key属性
- 实现列表后续的元素， 逐渐的漂上来的效果
.v-move{ transition: all 0.6s ease; } .v-leave-active{ position : absollute; } - 给transition-group添加appear属性，实现页面刚展示时候的入场效果
- 通过为transition-group元素添加tag=“ul”属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认为span属性
代码演示
<!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>
