title: Vue.js [v-cloak] does not use CSS transition
body: <p><strong>My Intention:</strong></p>
  
  <p>Using the Vue.js (v2) attribute [v-cloak], I want to have the "app" hidden until ready. When [v-cloak] is removed, I want the "app" to fade in. Using CSS opacity and transitions to achieve the fade.</p>
  
  <p><strong>The Problem:</strong></p>
  
  <p>When [v-cloak] is removed from my "app" there is no transition as I would expect. It just goes from hidden to visible immediately. Seems to ignore the CSS.</p>
  
  <p><strong>Example:</strong></p>
  
  <p>I have made an exaggerated example with Vue.js and a JavaScript simulated version to show how they both behave.</p>
  
  <p><a href="https://codepen.io/freemagee/pen/wXqrRM" rel="noreferrer">https://codepen.io/freemagee/pen/wXqrRM</a></p>
  
  <p>When viewing this example, you will see the "Plain old JavaScript" red box fade into view over 5 seconds. But the Vue controlled version just appears without a fade. They share the same CSS for the transition, so in theory should work the same way.</p>
  
  <p>Anyone used [v-cloak] effectively to achieve smooth transitions?</p>
  
  <p><strong>Codepen Code</strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app" v-cloak&gt;
    &lt;div class="red-box"&gt;&lt;/div&gt;
    &lt;p&gt;Vue.js {{ message }}&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="app2" v-cloak&gt;
    &lt;div class="red-box"&gt;&lt;/div&gt;
    &lt;p&gt;Plain old JavaScript&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html,
  body {
    margin: 0;
    height: 100%;
    min-height: 100%;
  }
  
  [v-cloak] .red-box {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s 5s, opacity 5s linear;  
  }
  
  #app,
  #app2{
    padding-top: 50px;
  }
  
  .red-box {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: red;
    opacity: 1;
    visibility: visible;
    transition: opacity 5s linear;
  }
  
  p {
    text-align: center;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>new Vue({
    el: "#app",
    data: {
      message: "Hello world"
    }
  });
  
  window.setTimeout(function() {
    document.getElementById("app2").removeAttribute("v-cloak");
  }, 500);
  </code></pre>