如何通过JS改变CSS属性并使用transition？

Question

我正在 JavaScript（属性）中设置 CSS 效果filter，并在下一行中将该属性设置为none. 我的图像等于filter，none但我想用 来实现transition。

\n\n

如果没有最后一行（当 I\xe2\x80\x99m 将属性设置回 时none），如果我filter在控制台中禁用该属性，则它可以与 一起使用transition。

\n\n

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

\n\n

我知道它\xe2\x80\x99s是因为JavaScript，但我不知道如何让它与transition.

\n

Answer 1

首先，您要设置 --webkit-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>