vue中路由切换动画效果(transition)

关于VUE中路由之间切换效果使用ransition来实现

一、现在要实现一个左右切换的效果

• 1、在整个项目的路由中写上

  <template>
      <div id="app">
          <FooterNav>FooterNav>
          <transition name="transitionRouter">
              <router-view>router-view>
          transition>
      div>
  template>

• 2、定义样式效果

  .transitionRouter-enter-active,
  .transitionRouter-leave-active {
      transition: all 0.4s;
  }
  
  .transitionRouter-enter,
  .transitionRouter-leave{
      transform: translate3d(100%, 0, 0);
  }

• 3、补充说明

  如果需要单个路由页面这样的效果,就定义在单个页面里面

  <transition name="list-fade">
  ...
  transition>

• 4、代码见demo