vue3 transtion 多级路由动画如何实现

Question

上面是一个管理端结构，父组件和子组件都是通过router挂载的。

  <router-view v-slot="{ Component, route }">
    <transition
      enter-from-class="op-0 translate-x--10"
      leave-to-class="op-0 translate-x-10"
      mode="out-in"
      appear
    >
      <component
        :is="Component"
        :key="route.fullPath"
        transition="~ duration-300"
        class="min-w-980 max-w-1280 mx-auto rd-2"
      />
    </transition>
  </router-view>

在切换子组件时，怎么只触发子组件的过渡动画，而不触发父组件的

Answer 1

【以下回答由 GPT 生成】

问题: 如何实现Vue3多级路由动画中只触发子组件过渡动画而不触发父组件的动画？

解决方案:

在Vue3中，可以使用v-slot指令来获取子组件，然后通过子组件来控制动画。具体步骤如下：

1. 首先，在父组件中移除父组件包裹子组件的transition标签。

<router-view v-slot="{ Component, route }">
  <component
    :is="Component"
    :key="route.fullPath"
    transition="~ duration-300"
    class="min-w-980 max-w-1280 mx-auto rd-2"
  />
</router-view>

1. 然后，为子组件添加独立的transition标签，用于控制子组件的动画。

<transition
  enter-from-class="op-0 translate-x--10"
  leave-to-class="op-0 translate-x-10"
  mode="out-in"
  appear
>
  <slot></slot>
</transition>

1. 最后，在子组件中添加过渡效果。

<template>
  <div class="child-component">
    <!-- 添加子组件的内容 -->
  </div>
</template>

<style>
.child-component-enter-active,
.child-component-leave-active {
  transition-property: opacity, transform;
  transition-duration: 300ms;
}

.child-component-enter-from,
.child-component-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}

.child-component-enter-to,
.child-component-leave-from {
  opacity: 1;
  transform: translateX(0);
}
</style>

通过以上步骤，我们就可以实现只触发子组件过渡动画而不触发父组件的动画。

【相关推荐】

• 这篇博客: Vue用户进行页面切换(路由跳转)时，动态改变路由的动画(transition效果)中的 当我们在使用Vue-Router时，为了用户有更好的视觉效果及体验，我们通常需要实现基于路由的动态过渡效果 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^