如何为背景滤镜添加动画效果？

Question

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

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

就这么简单。动画有点小故障:( 但是如果我注释掉背景滤镜那一行，情况会变得更好。

- Maria Cornetti

Answer 1

你可以通过动画化 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()更加高效。在响应性和图形准确性之间需要进行权衡。

- Joss

---

同样的效果，但不需要show类；这个对我来说很有效：https://dev59.com/McHqa4cB1Zd3GeqP4KMX#68632825 - Kalnode

Answer 2

我认为，这是一个非常新的属性，目前还无法正确地进行动画处理。您可以重新构建某些内容，以便使用以下属性：filter: blur(7px);

- RomanistHere

Answer 3

正如Roman所提到的

这是一个非常新的属性。在它被优化之前，你需要寻找其他替代方案。尤其是关于"filter: blur(6px)"：

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

如果你想在模态框上应用背景，请不要这样做。请在父元素（#root）上放置一些监听器，检查它是否有子模态框，在“＃root”上应用过滤器，然后享受吧。

- Ayberk Baytok

---

filter: blur()不等同于backdrop-filter。一个内部应用，另一个外部应用，可以这么说。 - Kalnode