reactjs - 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发布在react-reveal包中，以及相关的加载优化issue他们提到，这似乎是 Chrome 如何确定元素加载和/或渲染优先级的问题。

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

看起来很多关于 Chrome 如何优先考虑加载和绘制的 Material 都已经过时了，但这里是 an updated resource on loading priority 和 another one on rendering这可能会有所帮助。

如果有另一个元素对浏览器的渲染/绘制施加压力并降低了正在讨论的元素的优先级，您可以使用 Chrome 的开发工具跟踪绘制时间来诊断瓶颈所在。 (更多关于 here 和 here 和 here 。)看起来可用的诊断非常好:它们可以变得非常详细并且包括跟踪优先级。

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

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