React：如何优化Row组件中元素移除的平滑过渡动画？

问题核心矛盾 #

• 文字元素未脱离文档流时，会持续占据布局空间，干扰Logo的居中定位
• 直接用display: none虽能让Logo正常居中，但会丢失过渡动画效果

优化方案一：Flex布局+延迟切换display属性 #

通过React状态分阶段控制：先执行过渡动画，动画结束后再将文字元素设为display: none，既保留平滑动画，又让Logo能彻底居中。

import { useState, useRef, useEffect } from 'react';

// 组件内部逻辑
const [isOpen, setIsOpen] = useState(true);
const textRef = useRef(null);

useEffect(() => {
  if (!isOpen) {
    // 动画结束后隐藏元素，彻底脱离文档流
    const handleTransitionEnd = () => {
      textRef.current.style.display = 'none';
    };
    textRef.current.addEventListener('transitionend', handleTransitionEnd);
    return () => {
      textRef.current.removeEventListener('transitionend', handleTransitionEnd);
    };
  } else {
    // 展开时先恢复display，强制重绘触发动画
    textRef.current.style.display = 'inline-block';
    void textRef.current.offsetWidth;
  }
}, [isOpen]);

return (
  <Row style={{
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    flexWrap: 'nowrap'
  }}>
    <img src={Logo} width={32} />
    <span
      ref={textRef}
      style={{
        fontFamily: 'Overpass',
        fontSize: 'x-large',
        fontWeight: '600',
        whiteSpace: 'nowrap',
        transition: 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out',
        opacity: isOpen ? '1' : '0',
        transform: isOpen ? 'translateX(0)' : 'translateX(-10px)',
        display: isOpen ? 'inline-block' : 'inline-block'
      }}
    >
      Rigel
    </span>
  </Row>
);

优化方案二：绝对定位文字容器，不干扰Logo布局 #

将文字元素设为绝对定位，使其脱离文档流，Logo就能始终在Row中居中，同时单独对文字做过渡动画。

<Row style={{
  justifyContent: 'center',
  alignItems: 'center',
  overflow: 'hidden',
  flexWrap: 'nowrap',
  position: 'relative' // 作为绝对定位的父容器
}}>
  <img src={Logo} width={32} />
  <span
    style={{
      fontFamily: 'Overpass',
      fontSize: 'x-large',
      fontWeight: '600',
      whiteSpace: 'nowrap',
      position: 'absolute',
      left: '40px', // 根据Logo宽度调整，保证和Logo的间距
      transition: 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out',
      opacity: open ? '1' : '0',
      transform: open ? 'translateX(0)' : 'translateX(-10px)',
      visibility: open ? 'visible' : 'hidden'
    }}
  >
    Rigel
  </span>
</Row>

方案对比 #

• 方案一：基于文档流布局，适配性更强，无需手动计算位置，但需要处理过渡结束事件
• 方案二：实现简单，无需额外状态逻辑，但要根据Logo尺寸手动调整定位参数

关键优化点 #

1. 用transform: translateX()替代width过渡，避免布局重排导致的卡顿
2. 动画结束后切换display: none，让文字元素彻底脱离文档流，确保Logo居中
3. 精简过渡属性，只保留opacity和transform，提升动画流畅度

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