我有一个模式，我为其创建了背景。我希望背景模糊其后面的所有内容，但由于在显示模式时，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 后，背景过滤器属性的应用仍然会在模式显示时立即发生。我缺少什么？
我的 CSSactive class似乎没有应用到渲染的组件上，尽管 CSS 的其余部分实际上已经应用了。CSS 使用 CSS 模块来应用。由于NavLinkreact-router-dom包的组件将类设置为活动，我在CSS文件中选择了活动类，但由于某种原因，除了特定的选择之外，所有内容都应用于渲染的HTML。
React组件render() 的方法：
render () {
return (
<Fragment>
<nav className={CSSModule.Nav}>
<ul>
<li><NavLink to="/" exact>Home</NavLink></li>
<li><NavLink to={{
pathname: "/new-post",
hash: "#submit",
search: "?quick-submit"
}}>New Post</NavLink></li>
</ul>
</nav>
<Route
path={["/", "/home"]}
exact
component={Posts} />
<Route
path="/new-post"
exact
component={NewPost} />
</Fragment>
);
}
CSS代码：
.Nav {
box-sizing: border-box;
padding: 20px;
}
.Nav ul {
list-style: none;
display: flex;
justify-content: space-evenly;
background-color: burlywood;
padding: 10px;
}
.Nav ul …