过渡背景滤镜：父元素为 "overflow: hidden" 的模糊效果不起作用

Question

我正在尝试将“fade-in/fade-out”转换应用到具有 backdrop-filter: blur 的绝对定位 div。
我遇到了一些障碍，但我几乎成功了。

首先，backdrop-filter: blur 默认情况下不可设置动画，因此您必须 animate the opacity of the element.
然后，由于元素的父元素 overflow 设置为隐藏，backdrop-filter 无法正常工作（至少在 Chrome 中）。可以解决之后的问题（tl；dr；添加伪元素并对其应用过滤器）。

这两个部分虽然不能组合使用，但实际上，当过渡开始时，直到持续时间中指定的时间量过去时才会发生任何事情，然后突然应用过滤器。

是否有可能克服这个问题（最好是 css）？

p {
  height: 400px;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  z-index: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  z-index: 2;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
}

.container:hover .overlay {
  opacity: 1;
}

<div class="container">
  <p> Lorem ipsum dolor sit amet </p>
  <div class="overlay"></div>
</div>

Answer 1

您可能希望过渡发生在伪元素上并移动其不透明度。

p {
  height: 400px;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  z-index: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 500ms ease;
}

.container:hover .overlay::after {
  opacity: 1;
}

<div class="container">
  <p> Lorem ipsum dolor sit amet </p>
  <div class="overlay"></div>
</div>

过渡背景滤镜：父元素为 "overflow: hidden" 的模糊效果不起作用

Transitioning backdrop-filter: blur on an element with "overflow: hidden" parent is not working

html

css

css-transitions