Vue ＜transition-group＞ 列表的 添加/删除元素 过渡案例

<!-- Vue <transition-group> 列表的 添加/删除元素 过渡案例 -->
<template>
  <div class="page">
    <button @click="add">add</button>
    <button @click="remove">remove</button>
    <!--
    <transition-group>以一个真实元素呈现，默认为span
    可以通过tag属性更换其他元素

    <transition-group>不可以用过渡模式mode

    transition-group>内部元素必须提供唯一的key属性

    css过渡的类将会应用在内部的元素中，例如下面的<span>
    -->
    <transition-group name="list" tag="p">
      <!--
      由items的改变引起的过渡效果
      -->
      <span v-for="item in items" :key="item" class="list-item">
      {{item}}
      </span>
    </transition-group>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        nextNum: 10
      }
    },
    methods: {
      randomIndex() {
        // Math.floor(x) 返回小于等于x的最大整数
        // Math.ceil() 将数字向上舍入到最接近的整数
        return Math.floor(Math.random() * this.items.length); // 返回0-8的整数
      },
      add() {
        /*
        * splice()方法用于添加或删除数组中的元素
        *   第一个参数：数组下标，规定从何处开始添加或删除元素
        *   第二个参数：规定要删除多少元素
        *   第三个参数及其他参数：要添加到数组的新元素
        * */
        this.items.splice(this.randomIndex(), 0, this.nextNum++)
      },
      remove() {
        this.items.splice(this.randomIndex(), 1)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .list-item {
    display: inline-block;
    margin-right: 10px;
  }

  /* 过渡效果的类名使用规则和<transition>一样 */
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
</style>