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.

ciekals11 · Accepted Answer · 2021-04-09 13:29:42Z

1

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

answered Apr 9, 2021 at 13:29

ciekals11

2,1731 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vinibr · Accepted Answer · 2021-04-09 13:33:33Z

1

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>

answered Apr 9, 2021 at 13:33

Vinibr

8438 silver badges14 bronze badges

Comments

Sander · Accepted Answer · 2021-04-09 13:28:06Z

0

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();

answered Apr 9, 2021 at 13:28

Sander

237 bronze badges

Comments

Fabrizio Calderan · Accepted Answer · 2021-04-09 13:43:02Z

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.

Collectives™ on Stack Overflow

CSS transition for new div created with javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related