React中如何让hover触发的字母旋转过渡动画强制完整执行

解决方案 #

你可以通过封装独立的字母组件避免重复编写状态逻辑，每个组件内部维护自身的动画状态，完全独立互不干扰，实现逻辑如下：

1. 封装<Letter />公共组件，每个组件单独维护isRotating状态控制动画执行
2. 仅在onMouseEnter且当前无正在执行的动画时才触发旋转状态，onTransitionEnd事件触发后再重置状态，中间鼠标移出不会中断动画
3. 取消CSS的:hover伪类触发逻辑，改为通过类名控制动画生效

完整JSX代码

// 封装独立的Letter组件，所有动画逻辑内聚在组件内部
function Letter({ children }) {
  const [isRotating, setIsRotating] = React.useState(false);

  const handleMouseEnter = () => {
    // 只有当前未执行动画时才触发新动画，避免重复触发异常
    if (!isRotating) {
      setIsRotating(true);
    }
  };

  const handleTransitionEnd = () => {
    // 动画完全执行完毕后重置状态，允许下次触发
    setIsRotating(false);
  };

  return (
    <li 
      className={isRotating ? 'rotate' : ''}
      onMouseEnter={handleMouseEnter}
      onTransitionEnd={handleTransitionEnd}
    >
      {children}
    </li>
  )
}

function App() {
  return (
    <ul> 
      <Letter>H</Letter>
      <Letter>e</Letter>
      <Letter>l</Letter>
      <Letter>l</Letter>
      <Letter>o</Letter>
    </ul>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

调整后的CSS代码

ul li {
    list-style: none;
    float: left;
    font-size:60px;
    color: black;
    transition: 0.5s;
}
/* 移除:hover伪类触发逻辑，改为通过状态控制的类名触发旋转 */
li.rotate {
    transform: rotateY(360deg);
}

该方案下所有字母的状态逻辑都封装在Letter组件内部，不需要为每个li单独编写重复代码，新增字母直接新增<Letter>标签即可。动画执行过程中不管鼠标是否移出，只要isRotating状态为true，动画类就不会消失，动画会完整跑完直到结束后才重置状态。

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