把下面的CSS代码放在入口APP.VUE当中
.slide-fade{
position: fixed;left:0;right: 0;
width: 100%;
background-color: white;
}
.slide-fade-enter, .slide-fade-leave-to
{
left:0;top: 0;right: 0;
position: absolute;
transform:translateX(-500px) translateY(-500px) rotate(-150deg) scale(0.5);
opacity:1;
}
.slide-fade-enter-active {
background-color: white;
transition: all 0.6s ease;
}
.slide-fade-leave-active {
transition: all 0.7s ease;
background-color: white;
transform:translateX(500px) translateY(500px) rotate(150deg) scale(1) ;
z-index: 100;
}
把下面这对标签包裹着
<transition name="slide-fade"></transition>
这对标签
<router-view/>
如下:
<transition name="slide-fade">
<router-view/>
</transition>
然后看看效果,可以自己修改动画效果;