title: How does <transition-group> work with Vue.components?
body: <p>Suppose I want to use the components to make a list that would disappear if I click on it, and use the <code>transition-group</code> to do the animation part.</p>
  
  <p>The following code can perform well:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;transition-group name="testanim"&gt;
    &lt;p key="1" v-if='open1' @click='open1 = false'&gt;Can You See Me?&lt;/p&gt;
    &lt;p key="2" v-if='open2' @click='open2 = false'&gt;Can You See Me?&lt;/p&gt;
  &lt;/transition-group&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.testanim-enter-active, .testanim-leave-active {
    transition: all .5s;
  }
  .testanim-enter, .testanim-leave-to {
    transform: translateX(1rem);
    opacity: 0;
  }
  .testanim-leave-active {
    position: absolute;
  }
  .testanim-move {
    transition: all .5s;
  }
  </code></pre>
  
  <p><code>open1</code> and <code>open2</code> are defined in <code>data</code> in Vue.js.</p>
  
  <p>However, the following code would not perform the animation at all.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;transition-group name="testanim"&gt;
    &lt;test-sth key="1"&gt;&lt;/test-sth&gt;
    &lt;test-sth key="2"&gt;&lt;/test-sth&gt;
  &lt;/transition-group&gt;
  </code></pre>
  
  <p>CSS: the same with above</p>
  
  <p>JavaScript:</p>
  
  <pre><code>Vue.component ("test-sth", {
    template: "&lt;p v-if='open' @click='open = !open'&gt;Can You See Me?&lt;/p&gt;",
    data: function () {
      return {
        open: true,
      }
    }
  })
  </code></pre>
  
  <p>So the problem is that how I can animate the components inside the <code>transition-group</code>. I've searched for a few hours but did not find some question or documents related to it.</p>
  
  <p>Update:</p>
  
  <p>The key problem is that the animation in the former example that <strong>the second sentence move upwards smoothly when the first sentense disappear</strong> do not show in the latter one. Although I may put the <code>transition</code> inside the <code>template</code>, That do not solve the problem.
  Should I write the whole <code>transition-group</code>inside the <code>template</code>, or something else...?</p>