官网API: https://cn.vuejs.org/v2/guide/transitions.html
官方的demo点击显示与消失
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
transition使用
<transition name="fade">
(元素,属性、路由....)
</transition>
class
定义
.fade-enter{ }
进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;(运动的初始状态)
.fade-enter-active{ }
进入过渡的结束状态,元素被插入时就生效,在 transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
.fade-leave{ }
离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
.fade-leave-active{ }
离开过渡的结束状态,元素被删除时生效,在 transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
自定义过度类名
默认的.fade-enter
变成.fade-in-enter
默认的.fade-enter-active
变成.fade-in-active
默认的.fade-leave
变成.fade-out-enter
默认的.fade-leave-active
变成.fade-out-active
<transition
name="fade"
enter-class="fade-in-enter"
enter-active-class="fade-in-active"
leave-class="fade-out-enter"
leave-active-class="fade-out-active"
>
<p v-show="show">hello</p>
</transition>
.fade-in-active, .fade-out-active{
transition: all 0.5s ease
}
.fade-in-enter, .fade-out-active{
opacity: 0
}
transition相关函数
<transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="show"></div>
</transition>
<script>
export default{
methods:{
beforeEnter(el){
console.log('动画enter之前');
},
enter(el){
console.log('动画enter进入');
},
afterEnter(el){
console.log('动画进入之后');
el.style.background="blue";
},
beforeLeave(el){
console.log('动画leave之前');
},
leave(el){
console.log('动画leave');
},
afterLeave(el){
console.log('动画leave之后');
el.style.background="red";
}
}
}
</script>
transition结合animate.css使用
以下代码演示元素以X轴为基线,翻转进场出场的动画 Animate.css库点这里
<!-- 翻转进场出场-->
<transition enter-active-class="flipInX" leave-active-class="flipOutX">
<div v-show="show" class="animated"></div>
</transition>
<!-- 或者 -->
<transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX">
<div v-show="show"></div>
</transition>
列表过渡
<transition-group enter-active-class="flipInX" leave-active-class="flipOutX">
<div v-show="show" :key="x" v-for="x in 5"></div>
</transition-group>
需要注意的是在
group
的时候,key
的取值直接影响动画的过渡,详情请参阅 vue动画key取值影响过渡动画表现