transition转场动画

transition转场动画
可以分为这几个状态
v-enter： 进入之前
v-enter-to：进入后
v-enter-active：这里包含了上面的v-enter、v-enter-to两个时间段，在这里可以对上半场过渡定义过渡时间、曲线等
v-leave：离开前
v-leave-to：离开后
v-leave-active：这里包含了上面的v-leave、v-leave-to两个时间段，在这里可以对下半场过渡定义过渡时间、曲线等
项目实战

 <template>
  <div id="app">
    <transition :name="cart">
        <router-view class="Router" />
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: "",
    };
  },
  watch: {
    $route(to, from) {
      if (to.name == "det") {
        this.cart = "cart-left";
      } else if (to.name == "home") {
        this.cart = "cart-right";
      }
    },
  },
};
</script>```

这当然还需要 路由配置

{
path:’/home’,
name:‘home’, // 这里的name被用到
component:()=>import(’…/views/home.vue’)
},
{
path:’/det’,
name:‘det’, // 这里的name被用到
meta:{
keepalive:true,
title:‘商品管理’
},
component:()=>import(’…/views/det.vue’)
}
];