Vue router-view 路由无缝切换动画

又是一年冬_

于 2023-02-23 03:52:59 发布

阅读量909

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_34261285/article/details/129173763

版权

Vue router-view 路由无缝切换动画,左滑淡出,右滑淡入。

HTML:

 <div class="wrap">
       <transition mode="out-in">
        <router-view></router-view>
      </transition>
  </div>

CSS:

/* 自定义切换动画 */
/* 元素刚进入的状态 */
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(-10px);
}
/* 被激活时 */
.v-enter-active {
    transition: all 0.3s;
}
/* 元素完全进入后的状态 */
.v-enter-to,
.v-leave {
    opacity: 1;
    transform: translateX(0px);
}
/* 元素离开前的状态 */
/* .v-leave {
    transform: translateX(0px);
    opacity: 1;
} */
.v-leave-active {
    transition: all 0.3s;
}
/* 元素离开后的状态 */
/* .v-leave-to {
    opacity: 0;
    transform: translateX(-30px);
} */