在 React 中使用 useRef() 触发 CSS 动画

Posted 2023-02-25

【中文标题】在 React 中使用 useRef() 触发 CSS 动画

【英文标题】：triggering CSS animation with useRef() in React

【发布时间】：2021-04-29 13:29:00

【问题描述】：

我对 React 中的 useRef 有一点疑问。

我正在使用 useRef() 来操作我的 React 应用程序菜单中一些按钮元素的属性。我只想让菜单按钮在我向下滚动页面时淡出并消失，这样它们就不会碍事了。相当经典的行为，没什么特别的

它有点工作，但是一旦按钮完成淡出动画，它就会再次可见，我不知道为什么......

这是我的 codeSandbox，所以你可以看到它的样子： code sandbox

感谢所有愿意提供帮助的人！！！

【参考方案1】：

如果要保持动画效果，需要将animationFillMode属性定义为forwards。

在您的代码中包含以下内容：

themeButton.current.style.animationFillMode = "forwards";

【讨论】：

是的，它有效而且更干净！我会调查的！！

抱歉，我忘记了如何为您解决我在 *** 上的问题表示感谢，我该如何再次执行此操作？我忘了...

答案旁边有一个复选标记以接受它作为正确答案。 meta.stackexchange.com/questions/5234/…