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

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] 钩子以及将 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);
}

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

React force transition to end on hover

reactjs

css-transitions

css-transforms

我尝试过的东西