为什么在 Vue.js 中从列表中删除项目时移动转换需要绝对位置

Question

https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions 给出了一个示例，其中当一个项目从列表中删除时，其他项目会平滑地移动到它的位置。为此，元素的样式为：

.list-complete-leave-active {
  position: absolute;
}

我想知道为什么没有这个它就不能工作？

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)
    }
  }
})

.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;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="list-complete-demo" class="demo">
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span
      v-for="item in items"
      v-bind:key="item"
      class="list-complete-item"
    >
      {{ item }}
    </span>
  </transition-group>
</div>

Answer 1

本例中，主动移除数字的位置设置为static至absolute，使得该元素不占用任何space。为什么这很重要？动画将剩余的数字向左滑动，如果删除的项目占用 space，则不会发生这种情况。例如，您可以将其替换为 position: fixed 或 margin-right: -8px。所有这些都将使边界框从大约 18px（距离数字 8px，距离边距 10）到 0px 动画化，将其余的内联定位项目整齐地向左滑动。

new Vue({
  el: '#list-complete-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    randomIndex: function () {
      return Math.floor(0)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    }
  }
})

.list-complete-item {
  transition: all 10s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="list-complete-demo" class="demo">
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span
      v-for="item in items"
      v-bind:key="item"
      class="list-complete-item"
    >
      {{ item }}
    </span>
  </transition-group>
</div>

为什么在 Vue.js 中从列表中删除项目时移动转换需要绝对位置

Why is position absolute needed for move transition when removing item from list in Vue.js

javascript

css

animation

vue.js