transition

• .v-enter{} 當前組件剛進入時的樣式
• .v-enter-to{} 當前組件進入完成的樣式
• .v-enter-active{} 當前組件進入的過程中的樣式
• .v-leave 當前組件離開時的樣式
• .v-leave-to 當前組件離開完成時的樣式
• .v-leave-active 當前組件離開過程中的樣式

    .v-enter{
      opacity: 0;
    }
    .v-enter-to{
      opacity: 1;
    }
    .v-enter-active, .v-leave-active{
      transition: all 3s ease
 
-in;
    }
    .v-leave{
      opacity: 1;
    }
    .v-leave-to{
      opacity: 0;
    }

• mode="in-out" 先進，再出

• <transition mode="in-out">

• mode="out-in" 先出，再進

• <transition mode="out-in">

組件切換

  <transition name="left">
    <router-view class="show"></router-view>
  </transition>
<style>
.left
 
-enter{
  transform: translateX(-100%);
}
.left-enter-to{
  transform: translateX(0);
}
.left-enter-active, .left-leave-active{
  transition: all 0.3s ease-in;
}

.left-leave{
  transform: translateX(0)
}
.left-leave-to{
  transform: translateX(100%)
}
.show{
  position: absolute;
}

meta 給路由添加信息

    export default
 
 new Router({
      routes: [
        {
          path: ‘/home‘,
          name: ‘home‘,
          component: Home,
          meta: {
            index: 0
          }
        },
        {
          path:‘/doc‘,
          name: ‘doc‘,
          component: Doc,
          meta: {
            index: 1
          }
        },
        {
          path: ‘/about‘,
          name: ‘about‘,
          component: About,
          meta: {
            index: 2
          }
        }
      ]
    })
    <template>
      <div id="app">
        <div>
          <ul>
            <li><router-link :to="{name:‘home‘}" tag="li">Home</router-link></li>
            <li><router-link :to="{name:‘doc‘}" tag="li">Doc</router-link> </li>
            <li><router-link :to="{name:‘about‘}" tag="li">About</router-link> </li>  
          </ul>
          </div>  
          <transition  :name="direct">
            <router-view class="show"></router-view>
          </transition>
      </div>
    </template>
    
    <script>
    export default {
      name: ‘App‘,
      data() {
        return {
          direct: ‘left‘
        }
      },
      watch: {
        $route(to,from) {
          console.log(to,from)
          this.direct = to.meta.index > from.meta.index ? ‘left‘ : ‘right‘
        }
      }
    }
    </script>
    <style>
    .right-enter{
      transform: translateX(100%);
    }
    .right-enter-to{
      transform: translateX(0);
    }
    .right-enter-active, .right-leave-active{
      transition: all 0.3s ease-in;
    }
    .right-leave{
      transform: translateX(0)
    }
    .right-leave-to{
      transform: translateX(-100%)
    }
    .left-enter{
      transform: translateX(-100%);
    }
    .left-enter-to{
      transform: translateX(0);
    }
    .left-enter-active, .left-leave-active{
      transition: all 0.3s ease-in;
    }
    .left-leave{
      transform: translateX(0)
    }
    .left-leave-to{
      transform: translateX(100%)
    }
    </style>

vue過渡動效