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