主页 / 问题 / 1218246
Accepted
HaZcker
Asked:2021-12-14 00:56:58 +0000 UTC2021-12-14 00:56:58 +0000 UTC

React 中的 CSS 过渡

  • 772

假设我想做一个块，className='box'
当点击这个块时，它的背景颜色通过添加一个类变为红色red

在正常的html/css/js应用程序中，我会这样做：

const block = document.querySelector('.box');

block.addEventListener('click', (e) => e.target.classList.toggle('red'))

多亏.box { transition: background 0.3s }了 CSS，颜色会平滑地变化。

但是在React中，如果className改了，就没有平滑度了，因为组件要重绘，马上就有了className='box red'

为 React 应用程序增加流畅度的正确（按惯例/架构）方法是什么？

css

2 个回答

  1. Best Answer

    类名

    import React from 'react';
import classNames from 'classnames';

import './styles.css';

const App = () => {
  const [redState, setRedState] = React.useState(false);

  return (
    <React.Fragment>
      <div
        className={classNames('box', {
          red: redState
        })}
      />

      <button onClick={() => setRedState(!redState)}>Change state</button>
    </React.Fragment>
  );
};

export default App;
    .box {
  width: 50px;
  height: 50px;
  background-color: green;
  transition: background-color 2s ease-in-out;
}

.red {
  background-color: red;
}

    • 2

  2. 或者就像上面的答案一样，但不使用第三方库：

    const App = () => {
  const [redState, setRedState] = React.useState(false);

  return (
    <React.Fragment>
      <div
        className={`box ${redState ? 'red' : ''}`}
      />

      <button onClick={() => setRedState(!redState)}>Change state</button>
    </React.Fragment>
  );
};
    • 1

相关问题