javascript - Transition not working without querying width property -

i want animate translatex transition on click event adding class div in js. transform , transition properties added in css file.

var widget = document.getelementbyid('widget');     widget.style.display = 'block'; document.getelementbyid('widget2').clientwidth; //comment line out , wont work widget.classname = 'visible'; 

it works if query width property of any element in dom before adding class.

here jsfiddle: https://jsfiddle.net/5z9flsr5/2/

can explain why not working?

that's because begin transition , modified display property "at same time". altering display ruin transition (citation needed, admittedly), idea isolate display changing , actual transiting:

https://jsfiddle.net/5z9flsr5/3/

document.getelementbyid('showwidget').addeventlistener('click', function(e) {      e.preventdefault();      var widget = document.getelementbyid('widget');          widget.style.display = 'block';      //document.getelementbyid('widget2').clientwidth;      window.settimeout(function(){          widget.classname = 'visible';      },0);  });

#widget {      width: 200px;      height: 80px;      background: black;      position: absolute;      transition: transform 500ms;      transform: translatex(-200px);      display: none;  }  #widget.visible {      transform: translatex(200px);  }        #widget2 {      position: absolute;      right: 0  }

<a href="#" id="showwidget">show</a>  <div id="widget"></div>  <div id="widget2">xxx</div>

querying clientwidth seems "pause" execution time, works too.