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

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

这是我的沙箱示例-

这是我的代码：

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

---

只需将一些数据添加到

-tag中，然后React就可以重新渲染此标记并启动动画

---

{questions[currentQuestion]}

只需在

-tag中添加一些数据，然后React就可以重新渲染这个标签，动画开始了

---

{questions[currentQuestion]}

您不能使用

useffect（）

，因为组件尚未“绘制”，因此这不会设置动画

---

useffect

在渲染之后但在“绘制”组件之前执行，您必须使用钩子

useLayoutEffect

。该钩子在绘制组件后执行，因此您将获得有关布局的更多信息，如位置、高度或重量。

您不能使用

useffect（）

，因为这将不会动画化，因为组件尚未“绘制”

---

useffect

在渲染之后但在“绘制”组件之前执行，您必须使用钩子

useLayoutEffect

。该钩子在绘制组件后执行，因此您将获得更多关于布局的信息，如位置、高度或重量。

看，在我的主题示例中，它正在工作，但当我将其添加到此代码中时，

它仍然没有重置动画，你知道这种情况下的解决方案吗？你能在沙盒中提供完整的代码吗？很难说查看小片段可能不起作用，因为您为

h2

标记重新输入了类名。在CSS文件中，仅为

问题

类名映射动画

className={

question${s.question}${s.animated}

}

--试试看。现在检查一下，它和我的项目中的例子一样

效果很好。注意：通过这种方式更改内部HTML不会影响重新渲染过程。看，在我主题中的示例中，它正在工作，但当我将其添加到此代码

中时，它仍然不会重置动画，您知道这种情况下的任何解决方案吗？您可以在沙盒中提供完整的代码吗？很难说查看小片段可能不起作用，因为您为

h2

标记重新输入了类名。在CSS文件中，仅为

问题

类名映射动画

className={

question${s.question}${s.animated}

}

--试试看。现在检查一下，它和我的项目中的例子一样

效果很好。注意：通过这种方式更改内部HTML不会影响重新呈现过程。

.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%);
  }
}