html - 带过滤器的新伪元素的过渡

Question

我正在研究图像的发光效果。 为了使发光超过一种颜色，我实际上制作了图像的伪元素副本，并应用了模糊和饱和度滤镜。这个伪元素是通过向图像的 div 添加一个类来创建的。

现在一切都很好，但我想通过缓出来过渡发光效果，但是无论我将过渡属性放在哪里，我似乎都无法让它发挥作用。

我制作了一个代码笔来说明: https://codepen.io/anon/pen/eYGJGPG

function addGlow() {
  document.getElementById('example').classList.toggle('mask')
}

.img {
  height: fit-content;
  width: fit-content;
  display: block;
  /* Doesn't transition */
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
}

.go {
  height: 400px;
  width: 400px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg");
  background-size: initial;
}

.mask::after {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: blur(10px) saturate(3);
  z-index: -1;
}

<div id="example" class="img go"></div>
<button onclick="addGlow()">Press</button>

Answer 1

当您删除类 .mask 时，伪元素 ::after 将从 DOM 中删除。您需要始终将::after 保留在 DOM 中才能看到其上发生的转换:

function addGlow() {
  document.getElementById('example').classList.toggle('mask')
}

.img {
  height: fit-content;
  width: fit-content;
  display: block;
}

.go {
  height: 400px;
  width: 400px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg");
  background-size: initial;
}

.img::after {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit;
  background-position: center center;
  z-index: -1;
  
  /* initial state */
  filter: blur(0px) saturate(0);
  transition: all 1.3s ease-out;
  -webkit-transition: all 1.3s ease-out;
  -moz-transition: all 1.3s ease-out;
  -o-transition: all 1.3s ease-out;
}

.mask::after {
  /* glow */
  filter: blur(30px) saturate(3);
}

<div id="example" class="img go"></div>
<button onclick="addGlow()">Press</button>