React force transition to end on hover

Question

Given :

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>

with JSFiddle link here ,

I want the letter spinning transformation to complete entirely upon mouse entering on the letter. Currently the animation looks really bad when hovering in and out very fast.

I saw similar questions on this, involving Javascript and JQuery, and the solution seems to change something in the javascript, but I don't know how to do this specifically with React's JSX.

---

Things I have tried

I have thought of a [transitionState, setTransitionState] hook along with using onMouseEnter={() => setTransitionState(true)} with onTransitionEnd={transitionState}, but I was not able to make this work and I don't think it's the right approach since there are 5 li elements and I would have to repeat this code for all of them ?

Does anyone have any idea how I could solve this?

Answer 1

You can make a component for transition.

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