如何制作背景滤镜动画？

Question

在同一个组件上使用背景幕滤镜和过渡效果时，我遇到了低fps的问题。

.modal-background {
   // some styles
   backdrop-filter: blur(2px)
   transition: all .15s linear
}

就这么简单。动画出现故障:(但是，如果我注释掉背景过滤器线，情况会越来越好。

Answer 1

通过像这样对backdrop-filter的{​​{1}}进行动画处理，可以达到不同但可比的效果：

opacity()

在Chromium中执行此操作时，我看到了一些小的图形故障。但从好的方面来说，我还发现这种方法比对（非背景）.bg { transition: backdrop-filter 0.2s; backdrop-filter: blur(4px) opacity(0); } .bg.show { backdrop-filter: blur(4px) opacity(1); } 属性的filter进行动画处理的替代建议具有更好的性能。在响应度和图形准确性之间需要权衡。

Answer 2

我相信，这是一个非常新的属性，尚无法正确制作动画。您总是可以重组某些东西来代替它工作：filter：blur（7px）;

Answer 3

As Roman mentions

它是一个非常新的属性。在对其进行优化之前，您必须寻找替代方案。更具体地讲“过滤器：blur（6px）”：

<div id="root"/>
<div id="modal"/>

如果您尝试将背景应用于模态，请不要。在父（#root）元素上放一些侦听器，检查它是否具有该子模式，在“ #root”上应用过滤器并享受。