1. 使用过渡类名实现动画
- v-enter: 进入之前元素的起始状态,还没有进入
- v-enter-to: 定义进入过渡的结束状态
- v-enter-active:定义进入过渡生效时的状态
- v-leave:定义离开过渡的开始状态
- v-leave-to: 动画离开之后,离开的终止状态,此时元素动画已结束
- v-leave-enter: 定义离开过渡生效时的状态
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 使用Vue官方提供的transition元素,将需要被动画控制的元素包裹起来 -->
<transition name="fade">
<h3 v-if="flag">哈哈哈</h3>
</transition>
</div>
<script>
var vm =new Vue ({
el: '#app',
data: {
flag: false
},
methods: {}
})
</script>
同时,在head部分定义样式
<!-- 自定义两组样式,来控制transition内部的元素实现动画 -->
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
/* fade-enter-active: 入场动画的时间段
fade-leave-active: 离场动画的时间段 */
.fade-enter-active,
.fade-leave-active {
transition: all 2s ease;
}
</style>
注: 若transition未加name属性,则过渡的类名均以 v- 开头,且定义的样式多个 transition可以共用
2.使用第三方animate.css类库
- enter-class
- enter-active-class
- enter-to-class
- leave-class
- leave-active-class
- leave-to-class
<link rel="stylesheet" href="animate.css"> //引入animate.css
<div id="app2">
<input type="button" value="toggle" @click="flag=!flag">
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"> // 注:要加animated
<h3 v-if="flag">哈哈哈</h3>
</transition>
</div>
3. JS钩子函数 (可实现半场动画,上面两种方法都无法实现)
<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>
例子:实现小球半场动画
<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"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意:动画钩子函数的第一个参数:el,表示要执行动画的那个DOM元素,是个原生的 JS DOM对象
beforeEnter(el) {
// 动画入场之前,此时动画尚未开始,可以在beforeEnter中设置元素开始之前的起始样式
el.style.transform = "translate(0,0)" // 设置小球开始动画之前的起始位置
},
enter(el, done) {
el.offsetWidth // 这句话无实际作用,但若不写则出不来动画效果 offsetHeight offsetTop offsetLeft都可以
// 动画开始之后的样式,在这里可以设置小球完成动画之后的结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = 'all 1s ease'
done() // 这里的 done 其实就是afterEnter函数的引用,不可缺少
},
afterEnter(el) {
// 动画完成之后,会调用
this.flag = !this.flag
}
}
})
</script>