动画效果一  淡入淡出

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;
    }