动画效果一  淡入淡出

vue router 动画 效果_ci

 

相关代码

组件页面

<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>

css

.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity .5s;
}
.fade-leave{
opacity: 1;
}
.fade-leave-active{
opacity: 0;
transition: opacity .5s;
}