Javascript 在上加载页面后启动动画

我正试图使一个元素动画后，页面上的反应加载，我怎么做，请

我是新手，所以我真的不知道如何针对类和动画，但这里是

HTML和CSS

<div className="dangle" >
</div>

请我需要反应中的解决方案请首先使用“useState”决定是否应用动画。（更改页面的状态）

其次，使用“useEffect”使所需的操作在页面加载后运行。如果将空数组作为第二个参数传递，则在加载页面后只执行一次回调

你好，世界
正文{背景色：粉蓝色；显示：网格；放置项目：中心；}
@关键帧摆动{
0%{变换：旋转（30度）；}
100%{变换：旋转（-30度）；}
}
.悬挂{
动画：向前摆动5秒；
浮动：左；
背景色：红色；
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={animate:false}；
}
componentDidMount（）{
this.setState（{animate:true}）
}
render（）{
回复你好；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

您可以添加加载事件：

window.addEventListener('load', (event) => {
  for (let dangle of document.querySelectorAll(".dangle")) dangle.classList.add("loaded");
});

并增强要执行的CSS，确保CSS仅在加载时执行：

.dangle.loaded {
  animation: swing ease-out 5s forwards;
  background-color: red;
  height: 10rem;
  width: 10rem;
}

让我们也修复HTML：

<div class="dangle" >
  foo
</div>

福

您可以定义一个“componentDidMount”函数来有条件地应用

悬挂

类当我查看您的代码笔时，它看起来已经在工作了。。。它现在的工作方式有什么问题？@TKoL它发生在页面加载之前，所以有时动画在我看到它之前就完成了。@TKoL请告诉我怎么做？-您创建了一个有状态组件，并在其中编写了一个

componentDidMount

函数。在该函数中，您可以执行类似于

this.setState（{dangle:true}）

的操作，并使呈现的div在

this.state.dangle

的基础上有条件地挂起类

this.state.dangle

感谢您的回答，如果我使用componentDidMount（）{this.setState（{dangle:true}）之类的类组件会怎么样我如何在这里应用它请修改类组件的代码。useEffect（回调，[]）类似于componentDidMount。读这封信，谢谢它奏效了，你太棒了！请作出反应

<div class="dangle" >
  foo
</div>