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

Question

我对 React 中的 useRef 有点疑问。

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

有点效果，但是一旦按钮完成其淡出动画，它就会再次可见，我不确定为什么...

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

感谢所有关心帮助的人!!!

Answer 1

如果要持久化动画效果需要定义animationFillMode属性到forwards

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

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