create element with js and add transition

Question

I am creating an html element with js with a width of 0 I would like to transit it to a different width

this will show the transition (obviously unusable)

element.style.transition = "all 0.4s ease";
element.style.width = 0;
alert(123);
element.style.width = 100;

this will also work

element.style.width = 0;
setTimeout(open, 1, element); //having the width=100 in the function

this will NOT work

element.style.width = 0;
element.style.width = 100;

what i would like to know if there is some event i can listen to on whose trigger i can apply the new size and the transition is visible

the settimeout is basically doing what i want but i would prefer to now if there is an event or a different way to do this

P.S not interested in Jquery or any kind of extension

EDIT -->

here some more code

x: function(){
    document.addEventListener("mousemove", y);

},
y: function(){
  t = document.getElementById("body");  
  d = document.createElement('div');
  d.style.height = 100;
  d.style.width = 100;
  d.style.background ="#f00"
  d.style.position = "absolute";
  d.style.left = Math.floor(Math.random() * 1000);;
  d.style.top = Math.floor(Math.random() * 1000);;
  d.style.transition = "all 5s ease";
  t.appendChild(d);
  setTimeout(z, 100, d);

},
z: function(d){
  d.style.background ="#00f";  
}

setting the timeout to 100 seams to work setting it to 10 and it misses some setting it to 1 and it misses nearly every so my conclusion if i set the timer to 1 it applys the new color before "something" has happened and there is no transition but its streit blue so i am looking for this "something" like addeventlistener("objectcreatedandcanbetransitioned") so how to do the above whit OUT settimer and whit out some cheat by creating an object and start the transition when i create the next

What do you want? To start the transition if some button is clicked for example? — ibrahim mahrir, Feb 07 '17 at 21:49

score 1 · Answer 1 · answered Feb 07 '17 at 22:29

The list of events are here

In the following code I set the width to zero. Then I have a function that changes the width. I set an event listener on myBtn for the click event, but it can be any event from the list above. The second parameter is the function to call when the event happens which is the callbackFunc() which is where I change the width to 100.

<!DOCTYPE html>
<html>
<body>

<div id="element">My Header</div>

<p>Click the button to see the width change.</p>

<button id="myBtn">Try it</button>



<script>

document.getElementById("myBtn").addEventListener("click", callbackFunc);

var element = document.getElementById("element")
element.style.width = "0px";
element.style.overflow = "hidden";

function callbackFunc() {
   
   element.style.backgroundColor = "blue";
   element.style.width = "100px";
element.style.transition = "all 2s";


element.style.width = "100px";
}
</script>

</body>
</html>

Also you probably need to have overflow hidden

score 1 · Answer 2 · edited May 23 '17 at 12:33

If I understand your question you want to wait until the DOM content is loaded, here is a related answer on how to handle document ready without jQuery. This means that you start the transition after the DOM loads (with 0px width) and sets it to 100px with right away.

var element = document.getElementById("element");
element.style.transition = "all 0.4s ease"
element.style.width = "0px";
var toggle = document.getElementById("toggle");
var toggleFunc = function() {
  if (element.style.width === "0px") {
    element.style.width = "100px";
  } else {
    element.style.width = "0px";
  }
};
toggle.addEventListener("click", toggleFunc);
document.addEventListener('DOMContentLoaded', toggleFunc, false);

.box {
  background-color: blue;
  height: 100px;
}

<button id="toggle">
  Toggle
</button>
<div id="element" class="box" />

create element with js and add transition

2 Answers2