CSS 背景过滤器：模糊过渡/延迟？

Question

我有一个带有 -webkit-box-reflect 的元素，另一个带有背景过滤器/-webkit-backdrop-filter 的元素位于元素的反射上方。 我的问题是，随着反射元素的移动，背景滤镜模糊得太快，使它看起来像是在闪烁。

有没有办法为模糊背景过滤器添加延迟/过渡，使其更新频率降低？

现场示例（反射仅在 Chrome 中正常工作）或GitHub 项目

容器元素：

#window {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}

背景过滤元件：

#sidebar {
    min-width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    backdrop-filter: brightness(25%) saturate(180%) blur(30vw);
    -webkit-backdrop-filter: brightness(25%) saturate(180%) blur(30vw);
    z-index: 100;
}

反射元素：

#destination {
    overflow: scroll;
    border: none;
    width: 100%;
    height: 100%;
    min-width: 700px;
    -webkit-box-reflect: left;
}

Answer 1

是的，您可以添加transition: transform 0.5s ease; 在元素的 css 中。 您可以通过增加或减少0.5s ease动来调整延迟时间（即，将其设为 1 秒将使其延迟 1 秒）。

此外，您可以调整背景过滤器的不透明度以实现大致相同的效果：

.bg {
  transition: backdrop-filter 0.2s;
  backdrop-filter: blur(4px) opacity(0);
}

.bg.show {
  backdrop-filter: blur(4px) opacity(1);
}

你可以参考这篇文章。