React组件中CSS keyframe点击动画不生效如何解决

• 自定义属性渲染问题：你直接给<img>标签传的open是非标准布尔属性，React不会将这类非原生属性按字符串值渲染到真实DOM节点上，你写的CSS属性选择器.open-button[open="false"]从始至终匹配不到元素，动画自然不会触发。
• 选择器逻辑写反：你的需求是点击打开菜单时图标旋转45度，但现有CSS只给open="false"（关闭状态）绑定了旋转动画，逻辑完全颠倒。
• 交互逻辑缺失：现有点击事件只会把状态设为true，没有切换关闭的逻辑，就算动画正常也只能触发一次，无法复位。
• 动画状态不全：只写了打开方向的关键帧，没有关闭复位的动画逻辑，状态切回关闭时图标会直接跳回初始角度，没有过渡效果。

1. 修改React组件代码 #

• 把自定义属性改为符合HTML规范的data-*前缀属性（data-open），React会正常将该属性的布尔值转为字符串渲染到DOM上，供CSS选择器匹配。
• 把点击事件改为状态切换逻辑，支持打开/关闭双向触发。

const Navmobile = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <img
        className="open-button h-[3vh] w-auto"
        src={openIcon}
        onClick={() => setOpen(prev => !prev)}
        data-open={open}
      />
      {open && <Dropdown />}
    </div>
  );
};

2. 修改CSS样式代码 #

• 分别给打开、关闭两个状态绑定对应方向的动画，保留你要的正负角度偏移弹性效果。
• 补全关闭复位的关键帧逻辑，保证两个方向的动效一致流畅。

.open-button {
  /* 给可替换元素加inline-block保证transform动画兼容性 */
  display: inline-block;
  cursor: pointer;
}

/* 打开状态：旋转到45度 */
.open-button[data-open="true"] {
  animation: rotate-open 500ms forwards;
}

/* 关闭状态：旋转回初始0度位置 */
.open-button[data-open="false"] {
  animation: rotate-close 500ms forwards;
}

@keyframes rotate-open {
  10% {
    transform: rotate(-5deg);
  }
  90% {
    transform: rotate(50deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

@keyframes rotate-close {
  10% {
    transform: rotate(50deg);
  }
  90% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

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