React项目中React Popper 2与React CSSTransition结合实现下拉动画的方案

核心冲突根因 #

两者协作失效的本质是职责边界混乱、生命周期时序错位：

• React Popper 的位置计算强依赖目标元素的真实DOM引用、实际渲染尺寸，如果元素ref绑定时机滞后、或者动画过程中元素本身的transform被覆盖，就会出现计算异常
• CSSTransition 需要完整的状态切换周期完成类名流转，如果在in属性变化时，外层直接通过条件判断强制卸载整个组件树，会导致退出动画还未执行就被强制移除，动画自然完全失效
• 常见的错误写法会把popper的定位元素和动画元素绑定在同一个DOM节点上，导致popper用于偏移定位的内联transform被动画的transform规则直接覆盖，既丢了定位，又断了动画效果

正确配置步骤 #

• 统一生命周期控制源
  • 所有挂载、卸载逻辑完全交由CSSTransition管理，外层绝对不要在visible变化时写{visible && <CSSTransition/>}这类直接卸载组件树的代码，仅将visible值绑定到CSSTransition的in属性
  • 保留unmountOnExit配置，保证退出动画执行完成后DOM节点被正常清理，无残留
• 修正ref绑定时序
  • 不要将ref直接硬绑定在JSX元素上，改用状态存储popper元素的DOM引用，通过ref回调自动同步节点状态，保证CSSTransition在任意时机挂载/卸载节点时，popper都能拿到最新的引用
  • 具体写法：用useState存储popperElement，将setState函数直接作为ref属性的值，替代传统的createRef/useRef直接绑定的写法
• 分离定位职责与动画职责
  • 把popper用于定位的外层div，和做过渡动画的内层卡片div做严格拆分：外层div仅负责接收popper的定位样式、传递popper属性，不添加任何transform类的动画规则；所有透明度、缩放、位移类的过渡动画，全部作用在内层卡片元素上，从根源上避免动画transform和popper的定位transform冲突
• 匹配动画参数
  • 将CSSTransition的timeout值调整为和CSS动画时长一致的数值（比如300-500ms，不要设置成万级的大值），保证类名切换的时序和CSS动画完全匹配

参考实现代码 #

const Dropdown = ({ children, autoclose = true }) => {
  // 存储触发按钮、popper元素的DOM引用
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const [visible, setVisible] = useState(false);

  // 初始化popper逻辑
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: 'bottom-start',
  });

  return (
    <>
      {/* 触发下拉的按钮 */}
      <button
        ref={setReferenceElement}
        onClick={() => setVisible(prev => !prev)}
      >
        下拉触发
      </button>

      {/* 注意：这里不做visible判断，直接渲染CSSTransition */}
      <CSSTransition
        classNames="dropdown"
        in={visible}
        timeout={300}
        unmountOnExit
      >
        {/* 外层定位元素：仅承担popper定位职责 */}
        <div
          ref={setPopperElement}
          style={styles.popper}
          {...attributes.popper}
          onClick={() => autoclose && setVisible(false)}
        >
          {/* 内层动画元素：所有过渡效果都在这里实现 */}
          <div className="dropdown-content bg-white p-3 rounded-xl shadow z-20 text-black">
            {children}
          </div>
        </div>
      </CSSTransition>
    </>
  );
};

对应CSS实现 #

/* 进入过渡 */
.dropdown-enter .dropdown-content {
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
}
.dropdown-enter-active .dropdown-content {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 退出过渡 */
.dropdown-exit .dropdown-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.dropdown-exit-active .dropdown-content {
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

常见踩坑提醒 #

• 不要把CSSTransition包裹在popper元素的内部，否则popper计算位置时会将未挂载的动画组件识别为无内容空节点，计算出的位置完全偏移
• 不要给作为定位载体的popper外层div添加任何transform、filter类的样式，这类样式会创建新的层叠上下文，破坏popper的定位计算逻辑
• 如果动画过程中popper边缘偏移，可在popper配置中手动调整computeStyles modifier的参数，或在动画结束后手动触发一次popper的位置重算

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