transition-group列表动画

transition 标签只能让单个元素添加动画效果，大多数情况下，列表用得比较多，如 li 列表，这里就要用到列表动画 transition-group。

案例需求：在文本框中添加内容，单击 “添加” 按钮，增加列表动画，效果如图 4-3 所示。

Figure 1. 图4-3　列表动画案例效果图

需求描述如下。

使用 v-for 渲染 li 列表。
初次进入页面时，li 列表从下往上过渡。
可新增数据，并且新增的数据从下往上过渡。

CSS 过渡代码如下。

<style>
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateY(100px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 1s ease;
    }
</style>

视图层代码如下。

<div id="main" v-cloak>
    <transition-group appear tag="ul">
        <li v-for="item in list" :key="item.id">
            {{item.id}}---{{item.name}}---{{item.age}}
        </li>
    </transition-group>
    <input type="text" placeholder="id" v-model="id" />
    <input type="text" placeholder="name" v-model="name" />
    <input type="text" placeholder="age" v-model="age" />
    <input type="button" value="添加" @click="add" />
</div>

视图层代码如下。

<script>
    var app = new Vue({
        el: '#main',
        data: {
            id: '',
            name: '',
            age: '',
            list: [
                { id: 1, name: '小明', age: 18 },
                { id: 2, name: '小红', age: 19 },
                { id: 3, name: '小刚', age: 18 }
            ]
        },
        methods: {
            add: function () {
                // 分别获取文本框值
                // 组织新对象
                // 使用push方法
                var newstu = {
                    id: this.id,
                    name: this.name,
                    age: this.age
                };
                this.list.push(newstu);

                // 清空输入框
                this.id = '';
                this.name = '';
                this.age = '';
            }
        }
    });
</script>

代码解析如下。

对于需要添加动画的列表，使用 transition-group 标签包裹。
添加两组 CSS 样式。
tag="ul" 表示 transition-group 会渲染成一个 ul 标签。
apper 表示给列表添加入场动画。