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

Posted 2023-03-06

【中文标题】反应力过渡以在悬停时结束

【英文标题】：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 元素我将不得不为所有这些重复此代码？

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

【参考方案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 ;)