list添加删除动画（transition-group）

<template>
  <div id="app">
    <transition-group tag="ul" name="list">
      <li v-for="(item,index) in list" :key="index">{{item}}<button @click="handleDelete(index)">删除</button></li>
    </transition-group>
    <el-button @click="handleAdd">添加</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return { list: ['项目1', '项目2', '项目3'] }
  },
  methods: {
    handleAdd() {
      this.list.push('项目n' + Math.random())
    },
    handleDelete(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  > ul {
    li {
      height: 40px;
      border: 1px solid #ccc;
    }
  }
  .list-enter-active,
  .list-leave-active {
    transition: height 0.1s linear;
  }
  // 进场 离场
  .list-enter,
  .list-leave-to {
    height: 0;
  }
}
</style>

 

新增和删除时对height做个动画