title: Why is position absolute needed for move transition when removing item from list in Vue.js
body: <p><a href="https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions</a> gives an example in which when an item is removed from a list, the other items smoothly move in its place. For this to work the element is styled with:</p>
  <pre><code>.list-complete-leave-active {
    position: absolute;
  }
  </code></pre>
  <p>I wonder why it doesn't work without this?</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: '#list-complete-demo',
    data: {
      items: [1,2,3,4,5,6,7,8,9]
    },
    methods: {
      randomIndex: function () {
        return Math.floor(Math.random() * this.items.length)
      },
      remove: function () {
        this.items.splice(this.randomIndex(), 1)
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list-complete-item {
    transition: all 1s;
    display: inline-block;
    margin-right: 10px;
  }
  .list-complete-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
  .list-complete-leave-active {
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="list-complete-demo" class="demo"&gt;
    &lt;button v-on:click="remove"&gt;Remove&lt;/button&gt;
    &lt;transition-group name="list-complete" tag="p"&gt;
      &lt;span
        v-for="item in items"
        v-bind:key="item"
        class="list-complete-item"
      &gt;
        {{ item }}
      &lt;/span&gt;
    &lt;/transition-group&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>