Vue官方文档transition-group标签案例疑惑记录

最近在看Vue的官方文档,看到transition-group动画标签时,对其中的一个案例实现过程疑惑了好久,这里记录一下,以便之后查阅.废话不多说,上代码:

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
	<title>vue pro</title>
	<style type="text/css">
		.list-complete-item {
		  transition: all 1s;
		  display: inline-block;
		  margin-right: 10px;
		}
		.list-complete-enter, .list-complete-leave-to
		/* .list-complete-leave-active for below version 2.1.8 */ {
		  opacity: 0;
		  transform: translateY(30px);
		}
		.list-complete-leave-active {
		  position: absolute;
		}
	</style>
</head>
<body>
	<div id="list-complete-demo" class="demo">
	  <button v-on:click="shuffle">Shuffle</button>
	  <button v-on:click="add">Add</button>
	  <button v-on:click="remove">Remove</button>
	  <transition-group name="list-complete" tag="p" :duration="5000">
	    <span
	      v-for="item in items"
	      v-bind:key="item"
	      class="list-complete-item"
	    >
	      {{ item }}
	    </span>
	  </transition-group>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
		  el: '#list-complete-demo',
		  data: {
		    items: [1,2,3,4,5,6,7,8,9],
		    nextNum: 10
		  },
		  methods: {
		    randomIndex: function () {
		      return Math.floor(Math.random() * this.items.length)
		    },
		    add: function () {
		      this.items.splice(this.randomIndex(), 0, this.nextNum++)
		    },
		    remove: function () {
		      this.items.splice(this.randomIndex(), 1)
		    },
		    shuffle: function () {
		      this.items = _.shuffle(this.items)
		    }
		  }
		})
	</script>
</body>
</html>

案例效果如下图所示:

我好奇的是,为何要添加.list-complete-leave-active样式把position设为absolute,推测一番:

当移除一个元素时,如果想要达到被移除元素下移的同时后边元素向前补进的动画效果,必须在元素下移开始的时候把position设为absolute,这样移除元素不占位置,后方元素立刻执行左移动画.但是,如果不加这条样式的话,会等到被移除元素下移动画结束,被销毁后,后方元素开始执行左移动画,事实会这样吗?把.list-complete-leave-active注销,效果如图所示:

注销之后发现,当移除元素被销毁后,后方元素并没有执行前移动画,而是直接到了新位置.

为什么会这样呢?个人猜测是由于移除元素被销毁后,transition-group标签的动画流程彻底结束,这时其他元素重新排序归位,不再继续执行动画.欢迎各位说出其他看法,相互学习!