vue过渡动效

Posted 2020-12-26 goff-mi

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>