Vue2路由动画效果实现

一，路由中的动画效果实现

<transition>
　　运动东西(元素,属性,路由.....);
</transition>

  class的定义:
　　.fade-enter{} //初始状态
　　.fade-enter-active{} //变化成什么样 --当元素出来(显示)
　　.fade-leave{} //可不写
　　.fade-leve-active{} //变化成什么样 --当元素离开(隐藏)

二，路由动画效果使用案例

1,transition 标签包裹的是需要做动画处理的组件

   <transition name="fadeIn">
                    <keep-alive>
                        <router-view v-if="$route.meta.keepAlive">
                            <!-- 这里是会被缓存的视图组件！ -->
                        </router-view>
                    </keep-alive>
                    </transition>
                    <transition name="fadeIn">
                    <router-view v-if="!$route.meta.keepAlive">
                        <!-- 这里是不被缓存的视图组件！ -->
                    </router-view>
                    </transition>

2，css样式

  .fadeIn-enter{// 组件显示前的状态
      opacity: 0;
  }
    .fadeIn-enter-active{// 组件显示时的状态
        transition: all 0.3s linear;
    }
    .fadeIn-leave-active{// 组件消失时候的状态
        transition: all 0.3s linear;
        opacity: 0;
    }