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

发布时间：2020-12-15 20:11:49 所属栏目：百科来源：网络整理

导读：在实现react-reveal时,我遇到了一个奇怪的问题.如果在向下滚动页面时动画未运行,直到停止然后动画按预期运行,会发生什么.有没有人有过这个问题的经验？提前干杯履行所以我只是简单地制作了一个渐变的div组件 class FadingDiv extends Component {... rende

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

履行

所以我只是简单地制作了一个渐变的div组件

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

然后简单地用FadingDiv切换div标签,我想在那里实现效果.这适用于safari和firefox,但是(令人惊讶的)chrome给了我一些问题.任何帮助都将受到大力赞赏,我感觉到了赏金.

解决方法

因此,查看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.它是另一种黑客类型修复,但看起来它也可以用于覆盖性能默认值以支持具有即将到来的动画的元素.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!