React绝对定位侧边栏打开时出现额外边距问题如何解决？

根因定位 #

你遇到的功能异常核心是focus()操作触发的浏览器强制重排打断了CSS过渡动画：当你修改侧边栏right属性触发transition动画时，useEffect同步执行了输入框聚焦逻辑，浏览器会立即计算当前DOM布局，直接跳过right属性变化的过渡过程，导致侧边栏没有滑入滑出的动画效果，看起来就像功能异常。

适配需求的修复方案 #

两种方案都基于isOpen状态控制焦点，完全兼容点击触发和ctl + ~快捷键触发的场景：

方案1：延迟聚焦（实现简单） #

把聚焦操作延后到动画触发之后执行，延迟时间和你设置的CSS transition时长保持一致即可：

// popout.tsx 内的useEffect修改为
useEffect(() => {
  const inputEl = inputRef.current;
  if (!inputEl) return;

  if (isOpen) {
    // 延迟时长和侧边栏transition动画时长保持一致即可，比如动画是300ms就设300
    setTimeout(() => inputEl.focus(), 300);
  } else {
    inputEl.blur();
  }
}, [isOpen]);

方案2：监听动画结束事件（更精准） #

通过监听侧边栏的transitionend事件，等动画完全结束后再执行聚焦，不会受动画时长修改的影响：

// 1. 先给粉色侧边栏容器绑定ref，比如命名为sidebarRef
// 2. 修改useEffect逻辑如下
useEffect(() => {
  const inputEl = inputRef.current;
  const sidebarEl = sidebarRef.current;
  if (!inputEl || !sidebarEl) return;

  const onTransitionEnd = () => {
    if (isOpen) inputEl.focus();
  };

  sidebarEl.addEventListener("transitionend", onTransitionEnd);
  if (!isOpen) inputEl.blur();

  return () => {
    sidebarEl.removeEventListener("transitionend", onTransitionEnd);
  };
}, [isOpen]);

两种方案都可以保留输入框自动聚焦的逻辑，同时不会打断侧边栏的滑入滑出动画。

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