使用componentDidUpdate+CSS透明度/可见性动画时的Ref聚焦异常问题

这个问题我之前做模态框组件时也踩过坑！核心原因是CSS过渡动画的执行时机和React生命周期钩子的触发时机不同步——当componentDidUpdate触发时，浏览器还在处理模态框从visibility: hidden到visible的过渡动画，此时元素还没完全进入可交互的可见状态，直接调用focus()自然不会生效。用setTimeout虽然能解决，但确实是个不够优雅的hack，下面给你几个更靠谱的方案：

方案1：使用requestAnimationFrame对齐浏览器渲染周期 #

requestAnimationFrame会和浏览器的重绘周期同步执行，比setTimeout更精准，能确保在浏览器完成模态框的渲染更新后再执行focus()。如果一次调用不够，嵌套两层可以保证等到过渡动画的第一帧完成：

componentDidUpdate() {
  // 第一层确保当前渲染周期结束
  requestAnimationFrame(() => {
    // 第二层确保过渡动画的初始可见性更新完成
    requestAnimationFrame(() => {
      this.emailInput.focus();
    });
  });
}

这种方式不需要硬编码延迟时间，比setTimeout更适配不同浏览器的渲染速度。

方案2：监听transitionend过渡结束事件 #

这是最精准的方案，直接绑定到CSS过渡完成的时机，完全贴合动画的实际结束时间：

首先在组件中添加事件监听（记得在卸载时移除，避免内存泄漏）：

componentDidMount() {
  this.emailInput.focus();
  // 获取模态框根元素，假设你通过ref获取到了this.modalRoot
  this.modalRoot.addEventListener('transitionend', this.handleTransitionEnd);
}

componentWillUnmount() {
  this.modalRoot.removeEventListener('transitionend', this.handleTransitionEnd);
}

handleTransitionEnd = (event) => {
  // 只处理visibility或opacity的过渡结束事件，避免其他过渡干扰
  if (['visibility', 'opacity'].includes(event.propertyName)) {
    // 确认模态框处于打开状态时再聚焦
    if (this.modalRoot.classList.contains('auth-modal_is-opened')) {
      this.emailInput.focus();
    }
  }
}

// 此时componentDidUpdate可以不用再写focus逻辑
componentDidUpdate() {}

这种方式完全依赖CSS过渡的原生事件，没有任何hack，是最推荐的实现方式。

方案3：调整CSS过渡逻辑，分离可见性与透明度 #

由于visibility的过渡是离散的（实际在动画末尾才切换状态），我们可以修改CSS，让visibility瞬间切换，仅用opacity做过渡，同时配合pointer-events控制交互性：

.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* 隐藏时禁止交互 */
  transition: opacity 400ms; /* 仅对opacity做过渡 */
  &.auth-modal_is-opened {
    visibility: visible; /* 瞬间变为可见 */
    opacity: 1;
    pointer-events: auto; /* 打开时允许交互 */
  }
}

修改后，模态框打开时visibility会瞬间变为visible，此时componentDidUpdate触发时，元素已经处于可见状态，直接调用focus()就能正常生效：

componentDidUpdate() {
  this.emailInput.focus();
}

这种方案不需要修改JS逻辑，仅调整CSS就能解决问题，适合不想增加JS复杂度的场景。

内容的提问来源于stack exchange，提问作者Mauricio Dziedzinski