根据父级设置动画背景滤镜的不透明度？

Question

我正在使用通过背景滤镜应用模糊效果的div。当自己的不透明度被设置为动画时，模糊的不透明度可以设置为动画，但是当其父级的不透明度被设置为动画时，则不能。

我正在尝试制作背景滤镜模糊的不透明度动画，以使其与父级模糊一起。用例是一个模态弹出窗口，其中背景和内容都以动画不透明度进出。我知道我可以为背景和内容分别设置不透明度的动画，但是似乎应该有一种方法可以仅对父对象进行动画处理，并使它们都根据一个值进行动画处理。

.blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.2);
}

这是我的意思的示例：https://codepen.io/GoingKayaking/pen/eYpPJxY

请注意模糊效果不会消失。它只是消失了。

Answer 1

这是因为.container已应用过渡持续时间。只需删除这些行，就可以像.blur元素处于动画状态一样。

.container {
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}