Как анимировать с нуля в React без перерисовки всего дерева

Question

У меня есть 3 коробки с анимацией css. Я хочу проверить анимацию их на видимой области, поэтому я подключил кнопки за пределами самих блоков.

import React, { useState } from "react";
import "./appearance.css";
import "./animation.css"

export default function App() {
  const clickBox = i => setters[i](!states[i]);

  const [clicked0, setClicked0] = useState(false);
  const [clicked1, setClicked1] = useState(false);
  const [clicked2, setClicked2] = useState(false);

  const states = [clicked0, clicked1, clicked2];
  const setters = [setClicked0, setClicked1, setClicked2];

  function Box({ index }) {
    let className = "box";
    if (states[index]) className += " clicked";

    return (
      <div onClick={() => clickBox(index)} className={className}>
        {index}
      </div>
    );
  }

  const Boxes = [0, 1, 2].map(i => <Box index={i} key={i} />);
  const Buttons = [0, 1, 2].map(i => (
    <button onClick={() => clickBox(i)} key={i}>{i}</button>
  ));

  return (
    <div className="app">
      <div className="boxes-wrapper">{Boxes}</div>
      <div className="buttons-wrapper">{Buttons}</div>
    </div>
  );
}

Если я обработал щелчок блока внутри компонента блока, один блок будет анимированные, правильно.

Но для того, чтобы кнопки работали, я должен поместить состояние clicked в родительский компонент. Нежелательный эффект этого состоит в том, что, когда состояние (в родительском элементе) изменяется, все дочерние элементы повторно отображаются Да, так работает React.

Это означает, что 1. Вы не можете анимировать, используя transition, потому что поля «появляются впервые» при каждом повторном отображении, поэтому нет предыдущего состояния 2. Если вы используете keyframes, анимация работает но они запускаются каждый раз, когда вы нажимаете одну клетку.

Итак, я знаю, в чем проблема, наверное. Но я не могу на всю жизнь понять, как это исправить!

Answer 1

Мне удалось добиться того, что, по вашему мнению, вы ищете, с некоторыми изменениями здесь -

https://codepen.io/soeltz/pen/abvbjwN

Наиболее заметные изменения -

• Я переместил ваш Box компонент за пределы App. Когда он определен внутри компонента App, он будет переопределяться каждый раз, когда App перезапускается после изменения состояния. Выдвигая его, каждый Box может обрабатывать свой собственный рендеринг на основе реквизита, переданного ему.
• Я не уверен, есть ли у вас это в файле CSS, но я добавил forwards к конец анимации ключевых кадров, чтобы кнопки сохраняли окончательный стиль.