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

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的更多信息：

Answer 2

首先，您设置了 --webkit-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';
});

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

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

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

How to change CSS property by JS and use transition?

html

javascript

css

css-transitions