fix: add motionDeadline to to fix the preview not be removed when the preview closed immediately after opening

[Emiyaaaaa]

问题描述

点击image打开图片预览弹窗的同时，立即按esc关闭时，预览弹窗不可见但是dom没有移除导致页面无法点击

复现步骤

antd https://ant.design/components/image-cn 中可以手动复现（点击图片打开预览的同时按esc关闭预览）

（视频中第一次手速慢了失败了，第二次复现成功）

test.MOV

rc-image 和 rc-motion 中可以代码方式复现(不稳定复现，但概率较大)

// rc-image
import Image from '@rc-component/image';
import * as React from 'react';
import '../../assets/index.less';

export default function PreviewMotionBDemo() {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <button
        type="button"
        onClick={() => {
          setOpen(true);
          requestAnimationFrame(() => {
            setOpen(false);
          });
        }}
      >
        Open + Close (next frame)
      </button>
      <Image
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        width={200}
        preview={{ open }}
      />
    </div>
  );
}

问题原因

打开预览后快速关闭时，rc-motion 中 dom 的 transitionend 事件有概率不会触发，导致跳过后续的处理逻辑。代码位于 react-component/motion/src/hooks/useDomMotionEvents.ts

解决方案

设置 rc-motion 的 motionDeadline 字段，同时在 bug 产生到 Deadline 兜底的这段时间，添加点击穿透的处理

[vercel]

@Emiyaaaaa is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Rate limit exceeded

@Emiyaaaaa has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 6 minutes and 13 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 6 minutes and 13 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b0f4fd7f-a661-4aa3-90e9-62e4cf0f818d

📥 Commits

Reviewing files that changed from the base of the PR and between ccf8236 and 733acef.

📒 Files selected for processing (2)

• assets/preview.less
• src/Preview/index.tsx

Walkthrough

在 src/Preview/index.tsx 中向 CSSMotion 组件添加了 motionDeadline={500} 属性，引入了动画进入/离开过程的截止时间值，未改变其他逻辑或事件处理。

Changes

Cohort / File(s)	Summary
动画配置 src/Preview/index.tsx	向 CSSMotion 组件添加 motionDeadline={500} 属性，以控制动画执行的截止时间。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• zombieJ

Poem

🐰 一个属性轻轻加，
动画有了截止刻度，
五百毫秒的承诺啊，
让过渡更加妥帖，
细节之处见真章！✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	标题清晰地描述了主要变更——添加 motionDeadline 以修复预览立即关闭时 DOM 未被移除的问题，与 PR 目标和代码变更相符。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request introduces a motionDeadline of 500ms to the Preview component's motion configuration. Feedback suggests that this hardcoded value might prematurely terminate custom animations that exceed 500ms, recommending either increasing the deadline to 1000ms or exposing it as a configurable property.

[coderabbitai]

🧹 Nitpick comments (1)

src/Preview/index.tsx (1)

431-431: 建议将截止时间提取为具名常量，减少魔法数字。

Line 431 的 motionDeadline={1000} 直接写数字降低了可读性和可维护性。建议提取为常量（如 PREVIEW_MOTION_DEADLINE_MS），并注明该值应大于 CSS 动画时长（当前 0.3s），以确保动画完成后再触发兜底机制。这样当样式中的 transition 时长调整时，也能及时同步更新此处。

♻️ 建议修改

+const PREVIEW_MOTION_DEADLINE_MS = 1000;
...
       <CSSMotion
         motionName={motionName}
         visible={portalRender && open}
         motionAppear
         motionEnter
         motionLeave
-        motionDeadline={1000}
+        motionDeadline={PREVIEW_MOTION_DEADLINE_MS}
         onVisibleChanged={onVisibleChanged}
       >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Preview/index.tsx` at line 431, Extract the magic number passed to the
Preview component as a named constant (e.g., PREVIEW_MOTION_DEADLINE_MS) instead
of the inline literal used in motionDeadline={1000}; define the constant near
the top of the module and use it in motionDeadline, and add a short comment that
the value must be greater than the CSS transition duration (currently 0.3s) so
maintainers update both when changing animation timing.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/Preview/index.tsx`:
- Line 431: Extract the magic number passed to the Preview component as a named
constant (e.g., PREVIEW_MOTION_DEADLINE_MS) instead of the inline literal used
in motionDeadline={1000}; define the constant near the top of the module and use
it in motionDeadline, and add a short comment that the value must be greater
than the CSS transition duration (currently 0.3s) so maintainers update both
when changing animation timing.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 00fb93f5-5059-4de3-a7bd-c26e56fac4dd

📥 Commits

Reviewing files that changed from the base of the PR and between 6d4980b and ccf8236.

📒 Files selected for processing (1)

• src/Preview/index.tsx