为何我的<motion.dialog>元素打开时无法执行动画？

问题重现 #

使用<motion.dialog>实现入场动画（从下方500px滑至顶部），但动画完全无效果。相关代码及浏览器渲染结果如下：

组件代码

<motion.dialog onClick={closeModal} className={className}
            initial={{insetBlockStart:"500px"}}
            animate={{insetBlockStart:"0px"}}
>

打开模态框逻辑

const eventModalHandle=()=>{
     setEventModal(true);
     document.querySelector(`.event-modal`).showModal();
}

浏览器渲染结果

<dialog class="event-modal" style="transform: translateY(0%) translateZ(0px); inset-block-start: 0px;">test modal</dialog>

问题根源 #

直接调用showModal()会让浏览器瞬间将dialog置为显示状态，跳过了motion的初始状态检测流程——motion需要在元素从隐藏到显示的过程中逐步触发动画，但浏览器原生的showModal()强制显示行为会覆盖这个过程，导致动画根本无法启动。

解决步骤 #

1. 让motion控制dialog的显示与动画
   将dialog的open属性绑定到状态，同时用状态控制animate的目标值，无需手动调用showModal()：

   <motion.dialog 
     onClick={closeModal} 
     className={className}
     open={eventModal}
     initial={{ insetBlockStart: "500px" }}
     animate={eventModal ? { insetBlockStart: "0px" } : { insetBlockStart: "500px" }}
     exit={{ insetBlockStart: "500px" }} // 可选：添加退场动画
   >
     {/* 模态框内容 */}
   </motion.dialog>
   

2. 简化触发函数
   只需要更新状态，后续逻辑交给motion处理：

   const eventModalHandle = () => {
     setEventModal(true);
   }
   

3. 重置dialog默认样式
   dialog默认是居中显示的，需要修改样式让inset-block-start生效，同时关闭浏览器自带的动画：

   .event-modal {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     margin: 0;
     border: none;
     animation: none; /* 禁用原生动画 */
   }
   

原理说明 #

通过绑定open属性到状态，motion能在状态变化时逐步修改元素位置属性，而非让浏览器强制瞬间显示。同时重置样式后，inset-block-start的变化能被正确识别并触发动画。

内容的提问来源于stack exchange，提问作者Umut Köse