CSS transition for new div created with javascript

Question

My goal is to create a div and then transition it to it's correct position.

// the HTML comes from a source, can't change this
var TheHTML = "<div id=\"abc\"></div>";

// HTML to Element
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;

// adding the new element
document.getElementById("container").appendChild(TheNewElement);

// adding transitions and style
document.getElementById("abc").style.transition = "left 1s, width 1s";
document.getElementById("abc").style.left = "100px";
document.getElementById("abc").style.width = "100px";

This does not work, it just spawns without any animated transition. However, if I add a small delay after appending the div, it works. Example:

// the HTML comes from a source, can't change this
var TheHTML = "<div id=\"abc\"></div>";

// HTML to Element
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;

// adding the new element
document.getElementById("container").appendChild(TheNewElement);

// break for short pause
alert("break");

// adding transitions and style
document.getElementById("abc").style.transition = "left 1s, width 1s";
document.getElementById("abc").style.left = "100px";
document.getElementById("abc").style.width = "100px";

I would prefer a solution where I don't need to wait for some timer, but it would be okay to wait for the appending to finish if that's an option and not some hard-coded timer.

Answer 1

I just found async functions and await . Solution:

// the HTML comes from a source, can't change this
var TheHTML = "<div id=\"abc\"></div>";

// HTML to Element
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;


// function so await can be used
async function MainFunc() {
    
    // adding the new element
    await document.getElementById("container").appendChild(TheNewElement);
    
    // adding transitions and style
    document.getElementById("abc").style.transition = "left 1s, width 1s";
    document.getElementById("abc").style.left = "100px";
    document.getElementById("abc").style.width = "100px";
    
};
MainFunc();

Answer 2

replace your

document.getElementById("abc").style.transition = "left 1s, width 1s";
document.getElementById("abc").style.left = "100px";
document.getElementById("abc").style.width = "100px";

with

document.getElementById('abc').animate([
    {left: '0', width: '0'},
    {left: '100px', width: '100px'}
], {
    duration: 1000,
    fill: 'forwards'
});

don't forget the fill: 'forwards' property. If you doesn't add this this animation will not persist

Answer 3

Why not combine js with css animations?

 var TheHTML = "<div class=\"moveTransition\">Test</div>"; // HTML to Element var TempDiv = document.createElement('div'); TempDiv.innerHTML = TheHTML; // adding the new element document.querySelector(".container").appendChild(TempDiv);

 .moveTransition{ animation: move 1s ease forwards; } @keyframes move { to { transform: translateX(100px) } }

 <div class="container"> </div>

Answer 4

Before injecting the div include this CSS in the page

#abc {
  --left: 0;
  --width: 0;
  position: absolute; /* or relative/fixed */
  left: var(--left);
  width: var(--width);
  transition: left 1s, width 1s;
}

in particular if the div at the initial state is empty set width and left to 0 (or other meaningful value you like). Also, the transition can be already included in the style itself, since the value of this property appears to be statically defined, not dependant on the Javascript.

Then, when you append a div just change the variables

let abc = document.getElementById("abc");
abc.style.setProperty('--width', '100px');
abc.style.setProperty('--left',  '100px');

so the animation will be triggered, changing from a default value (not auto ) to the new one, and a delay won't be necessary.