How to change CSS property by JS and use transition?

Issue

I am setting up a CSS effect in JavaScript (filter property) and in the next line I am setting up that property to none. My image has filter equal to none, but I want to make it with transition.

Without the last line (when I’m setting the property back to none) if I disable the filter property in the console it works with transition.

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

I know it’s because of JavaScript, but I have no idea how to make it work with transition.

Solution

Firstly you are setting the transition of the --webkit-filter property, but you set the filter property. Secondly as jneander mentioned the change is happening too quickly you should wrap it in a requestAnimationFrame or a 1ms timeout

Here is a working demo with the fixes:

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>

Answered By - kess