transition-group

transition-group是表示的一组动画，一般常配合v-for动态渲染使用，由于transition中只能是单个的元素，因此如果需要多个元素添加动画效果需要加入transition-group使用。

代码示例

<transition-group name="myfade" tag="ul">
    <li v-for="item in dataList" :key="item.id">
    {{ item.label }}
    <Button type="text" @click="handleRemove(item)">remove</Button>
    </li>
</transition-group>

需要注意的点

1、多个动画列表过渡时，必须设置key值! 并且需要注意的是这个key不要使用index索引
2、transition-group与transition不同，它会以一个真实元素呈现：默认的是一个span标签包裹
如果使用的是index索引去处理，那么会有个问题，就是在删除的时候Vue的diff算法去寻找dom的差异性就会按照index从上往下去找其中的区别，就导致删除的永远是最后一项。

完整测试代码：

<template>
  <div id="demo">
    <Row>
      <Col span="9">
        <div class="demo-input">
          <Input
            v-model="value"
            maxlength="10"
            show-word-limit
            clearable
            placeholder="请输入添加项..."
            style="width: 200px"
          />
          <Button class="add-btn" type="success" @click="handleAdd"
            >添加</Button
          >
        </div>
      </Col>
      <Col span="15"> <span></span></Col>
    </Row>
    <div class="demo-input remove-btn">
      <h3>数据展示区:</h3>
      <transition-group name="myfade" tag="ul">
        <li v-for="item in dataList" :key="item.id">
          {{ item.label }}
          <Button type="text" @click="handleRemove(item)">remove</Button>
        </li>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      value: "",
      dataList: [],
    };
  },
  methods: {
    //添加子项
    handleAdd() {
      this.dataList.push({
        id: new Date().getTime(),
        label: this.value,
      });
      this.value = "";
      console.log(this.dataList);
    },
    //删除子项
    handleRemove(row) {
      console.log(row.id);
      this.dataList = this.dataList.filter((item) => item.id != row.id);
      console.log("删除操作", this.dataList);
    },
  },
};
</script>

<style scoped>
.demo-input {
  padding: 20px 10px;
}
.add-btn {
  margin-left: 10px;
}
.remove-btn li {
  width: 270px;
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-bottom: 5px;
  padding: 0 10px;
  justify-content: space-between;
}
.remove-btn li:hover {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.remove-btn >>> .ivu-btn-text {
  color: #57a3f3;
}
.remove-btn >>> .ivu-btn-text:hover {
  color: red;
  background: transparent;
}
.remove-btn >>> .ivu-btn-text:focus {
  box-shadow: none;
}
/* 效果过程 */
.myfade-enter-active,
.myfade-leave-active {
  transition: all 0.8s linear;
}
/* 进场的瞬间与离场的效果添加 */
.myfade-enter,
.myfade-leave-to {
  opacity: 0;
  transform: translateX(200px);
}
</style>

css vue transition transition-group