React-reveal 仅在滚动停止时起作用- chrome

Question

我运行在实施 react-reveal 时遇到 chrome 的奇怪问题。如果向下滚动页面时动画不是运行会发生什么情况，直到您停止然后动画按预期运行。有没有人有过这个问题的经验？提前干杯

实施

所以我只是做了一个褪色的div组件，比如

class FadingDiv extends Component {
...
  render() {
    return (
        <Fade>
           <div className={this.props.className}>
             {children}
           </div>
        </Fade>
    )
  }
}

然后只需在我想要实现效果的地方用 FadingDiv 切换掉 div 标签。这适用于 safari 和 firefox，但（令人惊讶的是）chrome 给我带来了问题。任何帮助将不胜感激，我感到赏金即将到来。

Answer 1

所以查看他们引用的 issue posted in the react-reveal package, and the related loading optimization issue，这看起来可能是 Chrome 如何优先加载 and/or 元素渲染的问题。

如第二个线程中所述，有多种 hack 类型的修复可能能够改变 Chrome 的事件优先级以支持动画，具体取决于页面当前的构建方式.例如，您可以显式强制滚动或滚动结束时的事件覆盖默认值。或者，您可以向元素或其同级元素添加属性，以强制它们以更高或更低的优先级进行标识。

看起来很多 material 关于 Chrome 如何确定负载和油漆的优先级的内容已经过时，但这里是 an updated resource on loading priority another one on rendering 可能会有帮助。

如果有另一个元素对浏览器 rendering/painting 施加压力并降低正在讨论的元素的优先级，您可以诊断瓶颈在哪里使用 Chrome 的开发工具来跟踪绘制时间. （更多关于 here and here and here。）看起来可用的诊断非常好：它们可以非常详细并包括跟踪优先级。

您可以尝试使用的另一件事是 CSS will-change property。这是另一个 hack 类型的修复，但它看起来也可用于覆盖性能默认值以支持具有即将到来的动画的元素。

根据页面加载方式和其他元素的目标，希望其中一些有助于诊断瓶颈，并从那里改变优先级足以获得您想要的行为。

Answer 2

好的，我想我在设计 React Reveal frontpage (a lot of image animations). Someone else has also reported similar issue 的移动版本时已经成功地部分重现了这个问题。我深入研究了如何 Chrome 确定事件处理程序的优先级，并设法对 react-reveal 事件处理程序进行了一些调整，这似乎有助于在重负载下获得更高的优先级和更好的性能。您可以通过安装一个包含所有内容的专用测试版来尝试：

npm i react-reveal@1.1.9-beta.1

看看它是否能解决您的问题。请报告我在桌面上重现结果时的结果。我还将在 1.1.9 中推出略微调低的修复程序。

React-reveal 仅在滚动停止时起作用- chrome

React-reveal only working when scroll is stopped- chrome

browser-support

web

reactjs