使用 JavaScript 模糊图像

Question

我想做一个类似幻灯片的东西，但是如果您按下下一张图片的按钮，它应该会模糊，直到无法识别，然后下一张图片应该显得模糊并变得清晰。这里的问题是，我必须通过 JS 应用模糊，我当前的方法如下所示： document.getElementById("no1").style.filter = "blur(3Px)";

如果我用 css 应用模糊，它工作得很好，但我需要在单击按钮时应用它，这是行不通的。我试图模糊的对象是<img>

另外，最好知道是否存在等待条件之类的情况，或者函数中的其他步骤是否会在开始之前等待模糊的过渡持续时间完成。

Answer 1

const img = document.querySelector('img');
img.addEventListener('click', toggleBlur);

function toggleBlur() {
  this.classList.toggle('blur');
}

img { transition: filter 1s linear; }
.blur { filter: blur(30px); }

<img src="https://i.imgur.com/KjUybBD.png"></img>

适用于 Chrome、Firefox、Safari、最新的 Edge...