使用 Vue 过渡效果和动画来实现移动端点击底部让路由内的组件侧滑依次出现的效果

1. 添加路由 meta 属性

首先，在路由配置文件中添加 meta 属性来标记需要动画效果的路由。这个属性可以包含任意的数据，用于自定义路由配置信息。在这里，我们使用 meta 属性来标记需要动画效果的路由，并为其指定一个过渡效果的名称：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { transitionName: 'slide' } // 标记需要动画效果，并指定过渡效果名称为 'slide'
  },
  {
    path: '/about',
    component: About,
    meta: { transitionName: 'slide' } // 标记需要动画效果，并指定过渡效果名称为 'slide'
  }
];

2. 在 App.vue 中添加过渡组件

接下来，在 App.vue 组件中添加过渡组件。这个过渡组件可以包含一个或多个子组件，并在这些子组件之间执行动画效果。在这里，我们使用 <transition> 组件来包含 <router-view> 组件，从而在路由切换时执行动画效果：

<template>
  <div id="app">
    <transition :name="transitionName" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    transitionName() {
      const { matched } = this.$route;
      const lastMatched = matched[matched.length - 1];
      return lastMatched.meta.transitionName;
    }
  }
};
</script>

在这里，我们使用了 computed 计算属性来获取当前路由的 meta.transitionName 属性，并将其传递给过渡组件的 name 属性。这里的 mode 属性设置为 out-in，表示新页面会在旧页面淡出之后淡入。

3. 编写 CSS 样式

最后，我们可以通过 CSS 来实现侧滑效果。这里我们使用了 CSS3 的 transform 属性来实现移动效果，同时使用了 transition 属性来定义动画过渡效果。

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

在这里，.slide-enter 和 .slide-leave-to 分别表示进入和离开时的位置，.slide-enter-active 和 .slide-leave-active 分别表示进入和离开时的动画效果。

现在，当您在移动端点击底部的导航栏切换路由时，就会看到页面依次侧滑出现的效果了。