javascript - 如何通过JS更改CSS属性并使用过渡？

Question

我在 JavaScript 中设置一个 CSS 效果(filter 属性)，在下一行我将该属性设置为 none。我的图像有 filter 等于 none，但我想用 transition 来制作它。

没有最后一行(当我将属性设置回 none 时)如果我在控制台中禁用 filter 属性，它会与 transition< 一起使用.

loadImg.style.filter = `blur(${value})`;
loadImg.style.transition = `-webkit-filter ${transitionDuration} ${timing} ${delay}`;
loadImg.style.filter = 'none';

我知道这是因为 JavaScript，但我不知道如何让它与 transition 一起工作。

Answer 1

首先，您设置了 --webkit-filter 属性的转换，但您设置了 filter 属性。其次，正如 jneander 提到的那样，变化发生得太快了，你应该将它包装在 requestAnimationFrame 或超时中

这是一个带有修复的工作演示:

let value = "15px";
let loadImg = document.getElementById("block");

let transitionDuration = "1s";
let timing = "ease-in-out";
let delay = "1s";

loadImg.style.filter = `blur(${value})`;
requestAnimationFrame(()=>{
  loadImg.style.transition = `filter ${transitionDuration} ${timing} ${delay}`;
  
  loadImg.style.filter = 'none';
});

#block {
  width: 150px;
  height: 150px;
  background: red;
}

<div id="block"></div>