vue页面切换过渡动画 并解决切换空白问题_vue翻页动画中间的白色

一般vue项目 都是拿别人弄好的，所以这种动画已经写好了。有的朋友是自己整的，想整个动画。那么 咱们 开整~~~

<transition name="slide-fade">
    <router-view class="page"></router-view>
</transition>
1
2
3

  .slide-fade-enter-active,
  .slide-fade-leave-active
     {
       will-change: transform;
       transition: all 500ms;
       position: absolute;
     }.slide-fade-enter {
         opacity: 0;
         transform: translate3d(-100%, 0, 0);
     }.slide-fade-leave-active {
         opacity: 0;
         transform: translate3d(100%, 0, 0);
     }
     //解决空白的问题就是下面这段css
      .page {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 100%;
         margin: 0 auto;

     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

就这两点希望对你有帮助。喊一下口号！ 阿西吧~