最近在看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标签的动画流程彻底结束,这时元素直接重新渲染归位,所以不再执行动画,而把position设置为absolute就不占位置啦,后边元素动画触发并执行!欢迎各位说出其他看法,相互学习!