reactjs - react 力过渡以在悬停时结束

Question

给定:

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] 钩子(Hook)以及使用 onMouseEnter={() => setTransitionState(true)} 和 onTransitionEnd={ transitionState}，但我无法完成这项工作，而且我认为这不是正确的方法，因为有 5 个 li 元素，我将不得不为所有元素重复此代码他们？

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

Answer 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);
}