Bits-UI 中 Sheet 组件动画与导航冲突的解决方案

背景介绍

在使用 Bits-UI 的 Sheet 组件时，开发者可能会遇到一个常见的交互问题：当 Sheet 关闭时触发页面导航，会导致关闭动画被中断。这种情况虽然不影响功能，但会破坏用户体验的流畅性。

问题本质

Sheet 组件的 onOpenChange 事件会在 open 状态改变时立即触发，而此时组件的关闭动画可能尚未完成。如果在这个回调中执行页面跳转（如 SvelteKit 的 goto 方法），浏览器会立即中断当前动画，直接跳转到新页面。

技术原理

1. 状态与动画的关系：在 Bits-UI 中，open 状态是动画触发的源头，它控制着动画的开始和结束。等待动画完成再改变状态会破坏这种控制关系。

2. 受控组件的限制：作为受控组件，Sheet 需要立即响应状态变化，不能延迟状态更新来等待动画完成，否则会影响其他依赖该状态的功能。

解决方案

方案一：监听动画结束事件

<Sheet.Content onanimationend={() => !open && goto('/route')} />

这种方法直接监听组件的 animationend 事件，确保导航操作在动画完成后执行。

方案二：使用 Effect 和信号控制（新版推荐）

<script>
let dialog = $state<HTMLDialogElement | null>(null);
$effect(() => {
    const controller = new AbortController();
    dialog?.addEventListener('animationend', () => {
        if (!open) goto('/route');
    }, { signal: controller.signal });
    return () => controller.abort();
});
</script>

<Sheet.Content bind:ref={dialog} />

这种方法更加现代化，通过 Svelte 的响应式系统和 AbortController 来管理事件监听，避免了内存泄漏问题。

最佳实践建议

1. 动画优先：在涉及页面转场时，始终优先考虑动画的完整性，确保用户体验流畅。

2. 状态管理：理解组件状态与动画的关系，避免直接修改状态来影响动画。

3. 渐进增强：对于不支持 CSS 动画的环境，应提供降级方案，确保基本功能可用。

总结

虽然 Bits-UI 目前没有内置支持等待动画完成再触发回调的功能，但通过监听动画事件，开发者可以轻松实现这一需求。这种解决方案不仅适用于 Sheet 组件，也可以推广到其他需要动画完成后执行操作的场景中。理解组件的工作原理和浏览器的事件模型，能够帮助开发者构建更流畅的用户界面。