Question

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

实施

所以我简单地制作了一个衰落的div组件，比如

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

然后只需使用div切换FadingDiv代码，我想在其中实现效果。这适用于safari和firefox，但是（令人惊讶的）chrome给了我一些问题。任何帮助都将受到大力赞赏，我感到很有吸引力。

Answer 1

因此，查看react-reveal包中发布的issue以及他们引用的相关加载优化issue，看起来这可能是Chrome优先加载的问题和/或渲染元素。

正如第二个帖子中所提到的，有各种黑客类型的修复可能会改变Chrome的事件优先级以支持动画，具体取决于当前页面的构建方式。例如，您可以在滚动或滚动结束时显式强制事件来覆盖默认值。或者，您可以将属性添加到元素或其兄弟元素，以强制它们以更高或更低的优先级进行标识。

看起来很多关于Chrome确定加载和涂料的优先级的材料已经过时，但这里有an updated resource on loading priority 和another one on rendering可能会有所帮助。

如果有另一个元素对浏览器的渲染/绘制施加压力并使正在讨论的元素处于优先级，那么您可以诊断瓶颈在哪里使用Chrome的开发工具来跟踪涂料的时间。（有关here以及here和here的更多信息。）看起来可用的诊断程序非常棒：它们可以非常详细并包含跟踪优先级。

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

取决于页面加载的目标以及其他元素的目标，希望其中一些有助于诊断瓶颈，并从那里改变优先级足以获得所需的行为。

Answer 2

好吧，我想在设计移动版React Reveal frontpage（很多图像动画）的时候，我已成功地部分重现了这个问题。其他人也报告了similar issue。我深入研究了Chrome如何优先处理事件处理程序，并设法对react-reveal事件处理程序进行了几次调整，这似乎有助于在重负载下获得更高的优先级和更好的性能。您可以通过安装一个专用的测试版来尝试它，其中包含所有内容：

npm i react-reveal@1.1.9-beta.1

看看它是否解决了您的问题。请报告我在桌面上重现的结果。我还会在1.1.9中略微调整一下。

React-reveal仅在滚动停止时生效 - 铬

2 个答案: