Nuxt UI 模态框组件中实现动画结束后回调的最佳实践

在 Nuxt UI 框架中使用模态框(Modal)组件时，开发者可能会遇到一个常见问题：当模态框包含需要精确布局的元素（如流程图、图表等）时，由于模态框的过渡动画尚未完成就触发了布局计算，会导致元素位置计算不准确。

问题背景

当在模态框中集成类似 Vue-Flow 这样的流程图库时，开发者需要确保在模态框完全显示后再进行节点位置计算。这是因为：

1. 模态框的显示通常伴随着过渡动画效果
2. 在动画进行过程中，容器的尺寸可能尚未稳定
3. 过早计算会导致节点连接线(edges)位置不准确

解决方案演进

临时解决方案

在 Nuxt UI 官方提供完善解决方案前，开发者通常采用以下临时方案：

1. 使用 setTimeout 延迟计算：在模态框打开事件后设置一个定时器，等待动画大致完成
2. 禁用过渡动画：直接关闭模态框的动画效果，但这会影响用户体验

这些方案虽然能解决问题，但不够优雅且存在潜在风险（如不同设备上动画时间不一致）。

官方解决方案

Nuxt UI 团队在最新版本中增加了 after-enter 事件，专门用于处理这类场景。这个事件会在以下时机触发：

• 模态框的进入动画完全结束后
• 所有过渡效果完成时
• DOM 更新已经完成

实现示例

<template>
  <UModal @after-enter="handleModalOpened">
    <!-- 模态框内容 -->
    <div class="relative w-full h-[75vh]">
      <VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="layoutGraph" />
    </div>
  </UModal>
</template>

<script setup>
const handleModalOpened = () => {
  // 此时可以安全地进行布局计算
  updateNodeInternals();
  fitView();
}
</script>

技术原理

1. 动画生命周期：模态框的显示过程包含多个阶段（准备、执行、完成）
2. 事件时序：update:open 事件触发过早，而 after-enter 在正确时机触发
3. 布局计算：图表库需要在容器尺寸稳定后才能准确计算节点位置

最佳实践建议

1. 对于包含复杂布局的模态框内容，总是使用 after-enter 事件
2. 避免使用基于时间的延迟方案（setTimeout）
3. 考虑在模态框内容中使用 v-if 控制渲染时机
4. 对于性能敏感的场景，可以结合 requestAnimationFrame 使用

Nuxt UI 团队的这一改进展示了框架对开发者实际需求的快速响应，为构建复杂交互界面提供了更可靠的解决方案。