三十五、Vue中的列表过渡动画

<template>
  <div id="root">
      <!-- 关键就是 <transition-group>，这样列表动画就出现了  -->
    <transition-group>
      <div v-for="(item, index) of list" :key="index">{{item}}</div>
    </transition-group>

    <button @click="add">Add</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    add() {
      this.list.push("Hello World");
    }
  }
};
</script>
<style>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
v-leave-active {
  transition: opacity 1s;
}
</style>