title: CSS position transition not working at all when set with JavaScript
body: <p>I want to do the following things:</p>
  
  <ol>
  <li>show a div element;</li>
  <li>move it to a an initial position;</li>
  <li>set transition properties;</li>
  <li>move it to the target position using CSS transition.</li>
  </ol>
  
  <p>A minimal example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function bla() {
    /*
      var obj = $('#box');
      obj.css("left", "200px");
      obj.css("display", "initial");
      obj.addClass("trans");
      obj.css("left", "500px");
    */
  
    var elem = document.getElementById('box');
    elem.style.left = "200px";
    elem.style.display = "initial";
    elem.className = "box trans";
    elem.style.left = "500px";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#btn {
    position: fixed;
    top: 60px;
    left: 0px;
    width: 50px;
    height: 50px;
    background-color: #FEDCBA;
  }
  .box {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    background-color: #ABCDEF;
  }
  .box.trans {
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    transition: left 2s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box" class="box"&gt;&lt;/div&gt;
  &lt;div id="btn" onclick="bla()"&gt;click here&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/s82rj48q/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>It does not work at all. What is wrong?</p>
  
  <p>If I set the element initially visible, I get a smooth transition starting from the origin <code>left:0</code> which is totally strange because I assign <code>elem.style.left = "200px";</code> <b>before</b> I actually add the transition properties...</p>