似乎使用 setState
通过监听 window.scrollY
来为元素设置动画会产生非常不稳定的效果。
const scrollY = window.scrollY;
animation01: {
transformY: (scrollY > breakPoint01) ? `translateY(200px)` : `translateY(0px)`,
},
我最终得到了 ref
的解决方案来直接操作 DOM 以避免波涛汹涌的效果......
const breakPoint00 = 1250
const breakPoint01 = breakPoint00 + 230
const animation01 = ReactDOM.findDOMNode(this.animation01)
if (scrollY > breakPoint00) {
animation01.style.transform = `translateY(0px)`
} else (scrollY > breakPoint01) {
animation01.style.transform = `translateY(200px)`
}
为什么使用第一个解决方案时如此不稳定?这是在 React 中制作滚动动画的正确方法吗?
最佳答案
一般来说 - 是,您应该使用 ref
来设置动画或通过滚动、缩放等事件更改样式属性。原因是因为当您使用 setState
您每次滚动、缩放等时都强制重新渲染组件。此外,这些事件每秒可以调用多次,因此您可以想象为什么会出现断断续续效果。 p>
但是,当您直接更改 css 时,组件不会重新渲染 - 它只会更改元素上的样式,因此您的动画效果更加流畅。
编辑
所以我决定创建一个小演示来说明在答案下方的评论中提出的问题。
它的行为就像更新组件一样。您可以通过在 componentDidUdpate
Hook 中插入 console.log('updated')
轻松检查它 - 每次调用 setState
时,您都会看到 更新
消息。不过,它不会重新挂载组件。
关于javascript - 带有 setState 的 React 滚动动画不稳定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50665139/