反应力过渡以在悬停时结束答案

【问题标题】：React force transition to end on hover反应力过渡以在悬停时结束
【发布时间】：2021-10-28 07:31:38
【问题描述】：

给定：

function App() {

    return (
       <ul> 
         <li>H</li>
         <li>e</li>
         <li>l</li>
         <li>l</li>
         <li>o</li>
       </ul>
    );
   }

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

ul li {
    list-style: none;
    float: left;
    font-size:60px;
    color: black;

    transition: 0.5s;
}

li:hover {
    transform: rotateY(360deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
 <div id="app"></div>

JSFiddle link here，

我希望在鼠标进入字母时完全完成字母旋转转换。目前，当快速进出时，动画看起来非常糟糕。

我看到了类似的问题，涉及 Javascript 和 JQuery，并且解决方案似乎改变了 javascript 中的某些内容，但我不知道如何专门使用 React 的 JSX 来做到这一点。

我尝试过的事情

我想到了一个[transitionState, setTransitionState] 钩子以及将onMouseEnter={() => setTransitionState(true)} 与onTransitionEnd={transitionState} 一起使用，但我无法完成这项工作，我认为这不是正确的方法，因为有5 个li 元素我将不得不为所有这些重复此代码？

有人知道我该如何解决这个问题吗？

【问题讨论】：

标签： reactjs css-transitions css-transforms

【解决方案1】：

您可以制作一个组件进行过渡。

https://jsfiddle.net/fdq6nabk/21/

function AniLetter(props) {
  const handleMouseEnter = (e) => {
    e.target.classList.add("hover");
  }
  const handleTransitionEnd = (e) => {
    e.target.classList.remove("hover");
  }

  return (
    <li
      onMouseEnter={handleMouseEnter}
      onTransitionEnd={handleTransitionEnd}>
      {props.children}
    </li>
  )
}

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

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

CSS：

ul li {
    list-style: none;
    float: left;
    font-size:60px;
    color: black;
    margin: 0 6px;
}

li.hover {
    transition: 2.9s;
    transform: rotateY(360deg);
}

【讨论】：

再次感谢@goldencat ;)