1. 实现效果
2. 实现步骤
2.1 在页面组件之间添加过渡效果
使用 < transition name=“fade”>包裹 < router-view > 元素
<template>
<div>
<el-container>
<el-header>
<Layout></Layout>
</el-header>
<el-main>
<transition name="fade">
<router-view></router-view>
</transition>
</el-main>
</el-container>
</div>
</template>
2.2 设置过渡效果的CSS样式
<style scoped>
/* 菜单的淡入淡出效果 */
.fade-enter-active, .fade-leave-active {
/* 设置过渡效果的CSS属性名称 */
transition-property: opacity margin;
/* 设置过渡效果需要的时间 */
transition-duration: .5s;
}
.fade-enter-active {
/* 设置过渡效果何时开始 */
transition-delay: .25s;
}
.fade-enter, .fade-leave-active {
/* 过渡效果属性 */
opacity: 0;
margin-left: 50px;
}
</style>
3. 过渡的类名
在进入\ 离开的过渡中,会有6个 class 切换
- v-enter : 定义进入过渡的开始状态
- v-enter-active : 定义进入过渡生效时的状态
- v-leave: 定义离开过渡的开始状态
- v-leave-active : 定义离开过渡生效时的状态
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的< transition>, 则 v- 是这些类名的默认前缀。如果使用了< transition name=“my-transition”>,那么 v-enter 会替换为 my-transition-enter,其它过渡类类似…
具体描述参考:单元素/组件的过渡