如何通过JS更改CSS属性并使用过渡?

Question

我正在JavaScript(filter属性(中设置CSS效果，在下一行中，我将设置该属性以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>

Answer 2

filter = 'none'的应用可能发生得太快，无法应用和呈现初始筛选器值。如果将第二个过渡包装在双requestAnimationFrame中，这将允许渲染器建立要远离过渡的初始模糊状态。

const loadImg = document.querySelector('.loadImg')
const value = '20px'
const transitionDuration = '1s'
const timing = 'linear'
const delay = '0s'
loadImg.style.filter = `blur(${value})`;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
loadImg.style.transition = `-webkit-filter ${transitionDuration} ${timing} ${delay}`;
loadImg.style.filter = 'none';  
})
})

有关双请求动画帧的详细信息：双请求动画帧如何工作？