版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26641781/article/details/83864394
demo:
<template>
<div id="root">
<div>
<router-link to="/home">首页 \</router-link>
<router-link to="/about">关于</router-link>
</div>
<transition name="fade">
<router-view ></router-view>
</transition>
</div>
</template>
<style lang="less">
.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-enter-active{ } 进入过渡的结束状态,元素被插入时就生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
- .fade-leave{ } 离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;.fade-leave{ } 离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
- .fade-leave-active{ } 离开过渡的结束状态,元素被删除时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。.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;
<template>
<div id="root">
<div>
<router-link to="/home">首页 \</router-link>
<router-link to="/about">关于</router-link>
</div>
<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">
<router-view ></router-view>
</transition>
</div>
</template>
<style lang="less">
.fade-in-active, .fade-out-active{
transition: opacity .5s
}
.fade-in-enter, .fade-out-active{
opacity: 0
}
</style>
transition相关函数
<transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave">
<router-view ></router-view>
</transition>
methods:{
beforeEnter(){
console.log('动画enter之前');
},
enter(){
console.log('动画enter进入');
},
afterEnter(){
console.log('动画进入之后');
},
beforeLeave(){
console.log('动画leave之前');
},
leave(){
console.log('动画leave');
},
afterLeave(){
console.log('动画leave之后');
}
}
过度效果mode属性指定:
<transition name="fade" mode="in-out">
<router-view ></router-view>
</transition>
<transition name="fade" mode="out-in">
<router-view ></router-view>
</transition>
transition-group过度多个容器,需要设置key值
<transition-group name="fade" mode="in-out">
<router-view key="aa"></router-view>
<div key="bb">Hello</div>
</transition-group>