如何通过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

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';  
  })
})

有关double-requestAnimationFrame的更多信息： double requestAnimationFrame如何工作？

Answer 2

首先，您要设置--webkit-filter属性的过渡，但要设置filter属性。 其次，正如jneander提到的，更改发生得太快了，您应该将其包装在requestAnimationFrame或1ms超时中

这是修复的工作演示：

 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'; },0); 

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

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