当我在同一组件上同时使用背景滤镜和过渡效果时,遇到了低FPS的问题。
.modal-background {
// some styles
backdrop-filter: blur(2px)
transition: all .15s linear
}
就这么简单。动画有点小故障:( 但是如果我注释掉背景滤镜那一行,情况会变得更好。
当我在同一组件上同时使用背景滤镜和过渡效果时,遇到了低FPS的问题。
.modal-background {
// some styles
backdrop-filter: blur(2px)
transition: all .15s linear
}
就这么简单。动画有点小故障:( 但是如果我注释掉背景滤镜那一行,情况会变得更好。
你可以通过动画化 backdrop-filter
的 opacity()
来实现一个不同但类似的效果,具体代码如下:
.bg {
transition: backdrop-filter 0.2s;
backdrop-filter: blur(4px) opacity(0);
}
.bg.show {
backdrop-filter: blur(4px) opacity(1);
}
在使用Chromium时,我发现一些轻微的图形故障。但是好的一面是,我发现这种方法比动画非背板filter
属性的blur()
更加高效。在响应性和图形准确性之间需要进行权衡。
我认为,这是一个非常新的属性,目前还无法正确地进行动画处理。您可以重新构建某些内容,以便使用以下属性:filter: blur(7px);
这是一个非常新的属性。在它被优化之前,你需要寻找其他替代方案。尤其是关于"filter: blur(6px)":
<div id="root"/>
<div id="modal"/>
如果你想在模态框上应用背景,请不要这样做。请在父元素(#root)上放置一些监听器,检查它是否有子模态框,在“#root”上应用过滤器,然后享受吧。
filter: blur()
不等同于backdrop-filter
。一个内部应用,另一个外部应用,可以这么说。 - Kalnode
show
类;这个对我来说很有效:https://dev59.com/McHqa4cB1Zd3GeqP4KMX#68632825 - Kalnode