vue页面切换动画过渡，很炫酷！

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

然后看看效果，可以自己修改动画效果；