【VUE】列表过渡效果

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

在前面的章节中一直在操作单个元素以及同一时间渲染多个节点中的一个的过渡，那么怎么同时渲染整个列表，比如使用 v-for，该怎么渲染呢？VUE给我们提供了<transition-group> 组件。

transition-group介绍

1. <transition-group> 这个组件有如下几个特点：

   • 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
   • 过渡模式不可用，因为我们不再相互切换特有的元素。
   • 子元素通常使用v-for进行循环
   • 子元素必须要有唯一的key属性，且key不能为索引值。
   • css过渡是应用在子元素中，而不是这个容器本身。

2. <transition-group> 这个组件的语法：

   • appear :用来指定是否在出场时用渲染动画
   • tag:用来指定transition-group标签渲染后的默认标签，不指定，transition-group默认被渲染成span
   • transition-group里面包裹的内容必须要指定key

列表的进入/离开过渡

由一个简单的例子介绍一下进入和离开的过渡，效果仍然使用之前一样的 CSS 类名。

// HTML
<div id="app">
    <button type="button" @click="handleAdd">新增</button>
    <button type="button" @click="handleSplice">去除</button>
    <transition-group>
            <li v-for="(item, index) of list" :key="index">{{item.title}}</li>
    </transition-group>
</div>
// JS
handleAdd: function() {
        var index = 0
        this.list.push({
                id: ++index,
                title: 'Hello World'
        })
},
handleSplice: function() {
        this.list.splice(this.list.length-1, 1)
}
//CSS
.v-enter,.v-leave-to {
    opacity: 0;
}
.v-enter-active,.v-leave-active {
    transition: opacity 1s;
}

使用transition-group，相当于给每一个子元素都增加一个transition。

列表过渡中还有列表的排序过渡 、列表的交错过渡可以学习和参考。