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

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以及他们引用的相关加载优化问题，看起来很可能是 Chrome 如何优先加载和/或呈现元素的问题。

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

看起来很多关于 Chrome 如何确定加载和绘制优先级的材料都已经过时了，但这里有一个关于加载优先级的更新资源 和另一个关于渲染的资源可能会有所帮助。

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

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

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