Question

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

有没有办法为模糊背景过滤器添加延迟/过渡，以减少更新频率？

Live example（反射仅在 Chrome 中正常工作）或 GitHub project

容器元素：

#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

是的，您可以在元素的 css 中添加 transition: transform 0.5s ease;。您可以通过增加或减少 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);
}

你可以参考这个post。

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

1 个答案: