使用 mouseenter 事件设置状态时，css 过渡属性不起作用

Question

我想在悬停按钮时在按钮旁边显示动画文本。当我在按钮上使用

click

事件时，这工作正常，但在使用

mouseenter

和

mouseleave

事件时，这不起作用。

我正在使用 CSS 制作动画

transition

-

#text-container {
  transition: max-width 3s ease;
  overflow-x: hidden;
}

App.tsx

文件 -

import { useEffect, useState } from 'react';
import './App.css';

const TextComponent = () => {
  const [maxWidth, setMaxWidth] = useState('0vw');

  useEffect(() => {
    setMaxWidth('100vw');
  }, []);

  return (
    <div id="text-container" style={{ maxWidth, paddingLeft: '8px' }}>
      <div style={{ textWrap: 'nowrap' }}>Sample text??</div>
    </div>
  );
};

function App() {
  const [show, setShow] = useState(false);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: '300px',
      }}
    >
      <button
        onClick={() => setShow((prevShow) => !prevShow)}
        // onMouseEnter={() => setShow(true)}
        // onMouseLeave={() => setShow(false)}
      >
        Show Text
      </button>

      {show ? <TextComponent /> : null}
    </div>
  );
}

export default App;

StackBlitz - 链接

Answer 1

https://stackblitz.com/edit/vitejs-vite-osndza?file=src%2FApp.tsx 当使用 React 如何通过

mouseenter

和

mouseleave

事件处理组件重新渲染的 ms 时，React 会添加/删除 TextComponent，导致 CSS 转换每次都重新启动。

我已经检查过 StackBlitz 工作正常

CSS (

App.css

)

#text-container {
  max-width: 0;
  transition: max-width 0.5s ease;
  overflow-x: hidden;
  white-space: nowrap;
  padding-left: 8px;
}

#text-container.show {
  max-width: 100vw;
  transition: max-width 3s ease;
}

应用程序.tsx

import { useState } from 'react';
import './App.css';

const TextComponent = ({ show }) => (
  <div id="text-container" className={show ? 'show' : ''}>
    <div>Sample text??</div>
  </div>
);

function App() {
  const [show, setShow] = useState(false);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: '300px',
      }}
    >
      <button
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        Show Text
      </button>
      <TextComponent show={show} />
    </div>
  );
}

export default App;

说明：

• show

  状态现在会在

  show

  上切换CSS类（

  #text-container

  ）。
• CSS 可以平滑地处理

  max-width

  过渡，即使组件始终处于渲染状态也是如此，从而防止重新渲染破坏动画。