vue切换路由时的动画效果（简单）滑动进入

最新推荐文章于 2024-08-05 16:10:08 发布

zhangzuruiqqq

最新推荐文章于 2024-08-05 16:10:08 发布

阅读量332

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zhangzuruiqqq/article/details/117416293

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

代码很简单注意你的路由层次就行
在这里插入图片描述
我想在红圈位置切换时加入动画
我的app.vue

<template>
  <div id="app">
    <!-- 路由出口 -->
      <router-view/>
  </div>
</template>

我的router.js
我用了3级路由

{
    path: '/',
    component: Layout,
    children: [
      {
        path: '//audit',
        component: Audit
      },
      {
        path: '//recheck',
        component: Recheck
      },
      {
        path: '//home',
        component: Home
      },

路由这这样嵌套的
app.vue–>layout.vue–>audit.vue

在 layout.vue中加入代码即可你哪里需要动效在它外层加

<!-- 二级路由的出口 -->
        <transition name="transitionRouter" mode="out-in">
        <router-view ></router-view>
        </transition>

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

复制就能跑~~~ 作者开始一直在app.vue里操作导致一直没有效果
避免大家踩坑