把下面的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>

然后看看效果,可以自己修改动画效果;
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐