使用筛选器转换新的伪元素

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时，将从DOM中删除伪元素::after。您需要始终在DOM中保持：after，以查看其上发生的转换：

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>

Answer 2

可能考虑使用animation而不是transition。请参阅下面的工作片段。

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

.img {
height: fit-content;
width: fit-content;
display: block;
/* Doesn't transition */
}
.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;
z-index: -1;
animation: example-animation .5s ease-out;
animation-direction: normal;
animation-iteration-count: 1;
filter: blur(10px) saturate(3);
}
@keyframes example-animation {
0% {
filter: blur(0) saturate(3);
}
100% {
filter: blur(10px) saturate(3);
}
}

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