React动态添加className时CSS Transition父元素不生效问题求助

我实现了一个汉堡菜单，点击时通过添加额外className实现旋转动画，但遇到问题：把transition属性加在父元素.navbar__hamburger上完全没效果，单独加到内部的span元素上却能正常触发过渡动画。

初始CSS样式 #

.navbar__hamburger {
    position: relative;
    display: none;
    flex-direction: column;
    row-gap: 0.2rem;

    @include respond(desktop) {
      transition: all ease-in-out 5s;
      display: flex;
      z-index: 1000;
      cursor: pointer;
    }

    span {
      width: 2rem;
      height: 0.2rem;
      background-color: black;
    }

    span:nth-child(2) {
      width: 1rem;
      align-self: flex-end;
    }
  }

汉堡菜单点击后的CSS样式 #

.animation {
  span:nth-child(1) {
    transform: rotate(140deg);
  }

  span:nth-child(2) {
    opacity: 0;
  }

  span:nth-child(3) {
    position: absolute;
    transform: rotate(-140deg);
  }
} 

React动态添加className代码 #

const [isMenuOpen, setIsMenuOpen] = useState(false);

<div onClick={() => setIsMenuOpen(!isMenuOpen)} className={`navbar__hamburger ${isMenuOpen ? "animation" : ""}`}>
    <span></span>
    <span></span>
    <span></span>
</div> 

问题原因 #

transition是作用在元素自身的属性变化上的。你给父元素加了transition，但父元素本身的CSS属性没有任何变化——所有动画相关的属性修改（transform、opacity、position）都是发生在子元素span上的，所以父元素的transition根本不会触发。

只有当元素自身的属性（比如transform、opacity、width等）发生变更时，它身上的transition规则才会生效，过渡动画才会运行。

解决方案 #

把transition规则直接添加到span元素上，确保每个需要过渡的子元素都配置过渡效果：

修改后的初始CSS

.navbar__hamburger {
    position: relative;
    display: none;
    flex-direction: column;
    row-gap: 0.2rem;

    @include respond(desktop) {
      display: flex;
      z-index: 1000;
      cursor: pointer;
    }

    span {
      width: 2rem;
      height: 0.2rem;
      background-color: black;
      // 给span添加过渡规则，覆盖所有可能变化的属性
      transition: all ease-in-out 0.5s;
      // 也可以精准指定过渡属性，提升性能
      // transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, position 0.5s ease-in-out;
      position: relative; // 为第三个span的absolute定位提供基准，避免位置跳动
    }

    span:nth-child(2) {
      width: 1rem;
      align-self: flex-end;
    }
  }

优化点击后的动画样式

第三个span使用absolute定位时，最好加上top/left值确保位置准确，避免旋转后偏移：

.animation {
  span:nth-child(1) {
    transform: rotate(140deg);
  }

  span:nth-child(2) {
    opacity: 0;
  }

  span:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-140deg);
  }
}

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