我有一个模态，我为它创建了一个背景。我希望背景模糊它背后的一切，但由于在显示模态时，有一些 FPS 下降并且看起来有点滞后，我决定对其应用延迟过渡。不幸的是，由于我无法检测到的原因，过渡似乎不适用于背景过滤器属性。
这是应用于背景的CSS：
.Backdrop {
background-color: rgba(0, 0, 0, 0.25);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
backdrop-filter: blur(2px);
transition: backdrop-filter 500ms 2s;
}
应用此 CSS 后，当显示模态时，背景过滤器属性的应用仍然会立即发生。我错过了什么？
转换使您能够定义元素的两种状态之间的转换。您的背景从未更改状态（backdrop-filter: blur(2px)自页面加载以来它具有该属性），因此转换不会生效。
您正在寻找的是动画：
.backdrop {
background-color: rgba(0, 0, 0, 0.25);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
animation: blur-in 500ms 2s forwards; /* Important */
}
/* Let's define an animation: */
@keyframes blur-in {
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(2px);
}
}Some text for testing the blur.
<div class="backdrop"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句