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

【问题标题】：How to add animations on every re-render of component如何在每次重新渲染组件时添加动画
【发布时间】：2021-05-25 03:19:13
【问题描述】：

我在 React 上有一个简单的琐事应用程序组件。当我回答问题时 - 我的组件会重新呈现新问题，并且我希望为问题块制作动画。但是，我在这个组件的第一次渲染时只有一次性动画。如何在组件的每次重新渲染时制作动画？

这是我的沙盒示例 - 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%);
  }
}

【问题讨论】：

标签： javascript css reactjs animation rendering

【解决方案1】：

你不能使用useEffect()，因为组件还没有被“绘制”，所以它不会动画。

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

【讨论】：

【解决方案2】：

只需在<h2>-tag 中添加一些数据，React 就可以重新渲染这个标签并开始动画。

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

【讨论】：

看，关于我在主题中的示例它正在工作，但是当我将它添加到此代码<h2 key={questions[currentQuestion]} className={`${s.question} ${s.animated}`} dangerouslySetInnerHTML={{__html: questions[currentQuestion].question}}/>它仍然没有重置动画，你知道在这种情况下有什么解决方案吗？
能否提供沙盒中的完整代码？看小块很难说
也许，它不起作用，因为您重新设置了 h2 标签的类名。在 CSS 文件中，您仅为 question 类名映射动画。 className={question ${s.question} ${s.animated}} -- 试试看。
现在查看codesandbox.io/s/youthful-ardinghelli-hn2zx?file=/src/App.js和我的项目中的例子一样
<h2 className="question" dangerouslySetInnerHTML={{ __html: questions[currentQuestion] }} key={currentQuestion} /> 工作正常。注意：通过这种方式改变内部 HTML 不影响重新渲染过程。