切换页面淡出单入

vue的路由跳转过程页面呈现出淡入淡出的效果简单方法：

首先我们到App.vue页面进行操作，

image

然后我们复制以下css代码

image

<style>
*{
    margin: 0 auto;
}
.fade-enter-active, .fade-leave-active {
    transition: all .2s;
    transform: translate(0px,0px);}
.fade-enter, .fade-leave-active {
    opacity: 0;
    transform: translate( -100%,0px);
}
</ style>

.fade-enter-active, .fade-leave-active {
    transition: all .2s;
    transform: translate(0px,0px);
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
    transform: translate(-100%,0px);
  }

然后~~~~~搞定了 一个简单版的淡入淡出效果做完了