代码如下

<template>
  <div>
    <button style="margin-right: 20px;" @click="add">Add</button>
    <button @click="remove">Remove</button>
    <!--使用transition-group标签实现列表过渡-->
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
  
  export default {
    name: 'App',
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        nextNum: 10
      }
    },
    components: {
    },
    methods: {
      randomIndex() {
        return Math.floor(Math.random() * this.items.length)
      },
      add() {
        this.items.splice(this.randomIndex(), 0, this.nextNum++)
      },
      remove() {
        this.items.splice(this.randomIndex(), 1)
      }
    }
  }
</script>

<style scoped>
  body {
    margin: 0px;
    padding: 0px;
  }
  .list-item {
    transition: all 0.8s ease;
    display: inline-block;
    margin-right: 10px;
  }
  .list-leave-active {
    position: absolute;
  }
  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
  .list-move {
    transition: transform 0.8s ease;
  }
</style>

效果如下