title: Vuejs transition on table rows
body: <p>I'm trying to have a transition (animation) on html table row (vue.js) with no success. Here's the full 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>  new Vue({
      el: '#data',
      data: {
        items: [
          {
            data: 'd1',
            more: false
          },
          {
            data: 'd2',
            more: false
          },
        ]
      }
  
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fade-enter-active, .fade-leave-active {
          transition: opacity 2s
        }
        .fade-enter, .fade-leave-to  {
          opacity: 0
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"&gt;&lt;/script&gt;
  
  
      &lt;div class="container-fluid" id="data"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;table border="1" class="table table-bordered"&gt;
          &lt;thead class="thead-inverse"&gt;
            &lt;tr&gt;
              &lt;th&gt;anim&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;  
          &lt;template v-for="item, k in items"&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;button @click="item.more = !item.more" type="button" 
                           v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn"&gt;Show the hidden row&lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;transition name="fade" &gt; 
              &lt;tr  v-bind:key="item" v-if="item.more"&gt;
                &lt;td&gt;&lt;p &gt;{{k + 1}} - {{item.data}}&lt;/p&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/transition&gt;
  
          &lt;/template&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am expecting that the hidden table row should appear with transition/animation on opacity property when it appears, but nothing is happening, how am I supposed to do so? This is perfectly working on another element like span or other.</p>