如何为Vue异步组件与加载组件实现<transition>过渡效果？

嘿，这个问题问得好！要给异步组件和它的Loading组件加上<transition>过渡效果其实不难——默认的异步组件配置本身不支持过渡，所以我们需要自己包装一层组件来管理加载状态，把过渡逻辑嵌进去。下面我分别给你讲Vue 2和Vue 3的实现方式：

Vue 2 实现方案 #

首先，我们先定义好你的LoadingComponent：

const LoadingComponent = {
  template: '<div class="loading">加载中...</div>'
}

接下来，不要用简洁的异步组件定义方式，而是写一个包装组件，在内部处理异步加载、状态切换，同时用<transition>包裹动态组件：

Vue.component('AsyncComponent', {
  data() {
    return {
      isComponentLoaded: false,
      targetComponent: null
    }
  },
  components: {
    LoadingComponent
  },
  template: `
    <transition name="async-fade">
      <component :is="isComponentLoaded ? targetComponent : 'LoadingComponent'"></component>
    </transition>
  `,
  created() {
    // 加载目标异步组件
    import('./async-component.vue').then(res => {
      this.targetComponent = res.default
      // 加个小延迟，避免Loading组件一闪而过（本地开发环境加载太快时很有用）
      setTimeout(() => {
        this.isComponentLoaded = true
      }, 300)
    })
  }
})

最后，别忘了写过渡对应的CSS样式：

/* 过渡动画的基础样式 */
.async-fade-enter-active, .async-fade-leave-active {
  transition: opacity 0.5s ease;
}
/* 进入和离开的起始/结束状态 */
.async-fade-enter, .async-fade-leave-to {
  opacity: 0;
}

关键说明 #

• 我们通过isComponentLoaded这个状态来控制显示Loading组件还是目标异步组件，<transition>会捕捉到<component>的切换，自动应用过渡动画。
• 加入setTimeout是优化体验的小技巧——如果异步组件加载速度极快（比如本地开发），Loading组件可能瞬间消失，用户完全看不到，加个短延迟能让过渡效果更自然。

Vue 3 实现方案 #

Vue 3的异步组件API有所变化，我们可以用defineAsyncComponent配合包装组件来实现，逻辑和Vue 2类似：

首先定义LoadingComponent：

<script setup>
const LoadingComponent = {
  template: '<div class="loading">加载中...</div>'
}
</script>

然后创建包装组件：

import { defineAsyncComponent, ref, defineComponent } from 'vue'

const AsyncComponent = defineComponent({
  components: {
    LoadingComponent
  },
  setup() {
    const isLoaded = ref(false)
    // 定义异步组件
    const TargetAsyncComp = defineAsyncComponent(() => import('./async-component.vue'))

    // 触发加载并监听完成状态
    TargetAsyncComp().then(() => {
      setTimeout(() => {
        isLoaded.value = true
      }, 300)
    })

    return {
      isLoaded,
      TargetAsyncComp
    }
  },
  template: `
    <transition name="async-fade">
      <component :is="isLoaded ? TargetAsyncComp : LoadingComponent"></component>
    </transition>
  `
})

同样需要添加和Vue 2一样的CSS过渡样式，这里就不重复写了。

额外提示（Vue 3） #

如果你在使用<Suspense>组件，也可以给它的默认插槽和fallback插槽添加过渡，但需要注意<Suspense>的切换是基于异步依赖的，包装组件的方式反而更灵活可控，能自定义加载状态的切换时机。

自定义过渡效果 #

你可以根据需求修改过渡的CSS，比如改成滑入滑出：

.async-slide-enter-active, .async-slide-leave-active {
  transition: transform 0.5s ease;
}
.async-slide-enter {
  transform: translateX(20px);
  opacity: 0;
}
.async-slide-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

只需要把<transition>的name改成async-slide即可。

内容的提问来源于stack exchange，提问作者meteorlxy