CSS transition в React

Question

Допустим я хочу сделать блок у которого 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 приложениях?

Answer 1

classnames

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

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

БЛОГ НА HUSL

CSS transition в React

Ответы (2 шт):