如何在每次重新渲染组件时添加动画

Question

我在 React 上有一个简单的 trivia-app 组件。当我回答一个问题时——我的组件重新呈现新问题，我想为问题块制作一个动画。但是，我在该组件的第一次渲染时只有一次性动画。如何在每次重新渲染组件时制作动画？

这是我的沙箱示例 - https://codesandbox.io/s/youthful-ardinghelli-hn2zx?file=/src/App.js

这是我的代码：

import { useState } from "react";
import "./styles.css";

const questions = ["1", "2", "3", "4", "5"];
const answers = ["asgas", "asgasg", "ashash", "hasdha"];

export default function App() {
  const [currentQuestion, setCurrentQuestion] = useState(0);

  return (
    <>
      <h2 className="question">{questions[currentQuestion]}</h2>
      <div>
        {answers.map((i) => (
          <button
            onClick={() => {
              setCurrentQuestion((prevState) => prevState + 1);
            }}
            key={i}
          >
            {i}
          </button>
        ))}
      </div>
    </>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.question {
  background-color: blue;
  animation: fromTop 0.5s linear;
}

@keyframes fromTop {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0%);
  }
}

Answer 1

只需将一些数据添加到 <h2>-标签，然后 React 可以重新渲染此标签并开始动画。

<h2 className="question" key={currentQuestion}>{questions[currentQuestion]}</h2>

Answer 2

您不能使用 useEffect()，因为它不会动画，因为组件尚未“绘制”。

useEffect 在渲染之后执行，但在组件“绘制”之前执行，您必须使用钩子 useLayoutEffect。此挂钩在组件绘制后执行，因此您将获得更多有关布局的信息，如位置、高度或重量。

如何在每次重新渲染组件时添加动画

How to add animations on every re-render of component

javascript

css

animation

rendering

reactjs