element reaches to final state without showing transition/animation
I am creating a div element inside td element(div is the child of td element) using javascript.
newDiv = document.createElement("div"); newDiv.className = "class"; tdEle.appendChild(newDiv); I am also assigning a class to this newly created div. This positions the div element at the top-left corner inside the td element
.class{ position: absolute; height: 2%; width: 2%; background-color: azure; left: 0; top: 0; transition-duration: 350ms; } I am trying to make a transition so that the newDiv element covers the whole td element using JS. For this, I am doing something like this.
I have this in my CSS.
.class.scale { width: 100%; height: 100%; } To trigger this animation automatically, I am using this in JS
newDiv.classList.add('scale'); When I run the code, the newDiv does cover the whole td but transition animation is not being displayed. What am I doing wrong? any other way I can achieve this effect using JS.
EDIT: The solution provided works perfectly but I hid some details in my original problem. Because of which I am not getting the designed outcome.
DETAILS: I don’t have 1 <td> element but n of them. and I want to dynamically create a div inside each one of those <td>s for the same transition explained above.
tds.forEach(tdEle => { let id = getID(tdEle); // some logic to get the ID for <td> element console.log(id); let tdEle = document.getElementById(id); // get the actual td element // append a div at top left corner newDiv = document.createElement("div"); newDiv.className = "class"; tdEle.appendChild(newDiv); setTimeout(function() { // <--------------------------------- newDiv.classList.add('scale'); }); }); rest is the same…
when I use the given solution. This transition only happens for the div that was appended to the last td element. The class class was added to this last div only and not to the other divs. I guess this is because of the setTimeout() function???
First, you need to set the properties to animate, in your CSS:
transition-property: width, height; Then, depending on whether you’re adding the class immediatly or not, you might need to wait for the DOM to be updated before adding the class, otherwise you won’t see the animation:
setTimeout(function() { newDiv.classList.add('scale'); }); Demo
newDiv = document.createElement("div"); newDiv.className = "class"; document.body.appendChild(newDiv); setTimeout(function() { // <--------------------------------- newDiv.classList.add('scale'); });.class{ position: absolute; height: 2%; width: 2%; background-color: blue; left: 0; top: 0; transition-duration: 350ms; transition-property: width, height; /* <----------------- */ } .class.scale { width: 100%; height: 100%; }
