title: Transition not occurring first time
body: <p>I have the following css:</p>
  
  <pre><code>.some-el {
    width: 60%;
    height: 50%;
    position: fixed;
    left: 20%;
    right: 20%;
    top: 0%;
    background-color: black;
  
    /* All vendor-prefixes */
    transition: transform linear 1s;
    transform: translate3d(0,-100%,0);
  }
  
  .some-el.open {
    /* All vendor-prefixes */
    transform: translate3d(0,0%,0);
  }
  </code></pre>
  
  <p>With this html:</p>
  
  <pre><code>  &lt;div class="some-el"&gt;&lt;/div&gt;
    &lt;a id="open" href="#"&gt;Toggle&lt;/a&gt;
    &lt;script&gt;
      document.getElementById('open').onclick = function() {
        document.querySelector('.some-el').classList.toggle('open');
      };
    &lt;/script&gt;
  </code></pre>
  
  <p>The first time I click the link there is no transition, but on all subsequent clicks (whether to open or to close) the transition does occur.</p>