1、transition-group

transition-group是表示的一組動畫，一般常配合v-for動態(tài)渲染使用，由于transition中只能是單個的元素，因此如果需要多個元素添加動畫效果需要加入transition-group使用。

1.1、代碼示例

      <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.2、需要注意的點(diǎn)

• 1、多個動畫列表過渡時，必須設(shè)置key值! 并且需要注意的是這個key不要使用index索引
• 2、transition-group與transition不同，它會以一個真實(shí)元素呈現(xiàn)：默認(rèn)的是一個span標(biāo)簽包裹
  如果使用的是index索引去處理，那么會有個問題，就是在刪除的時候Vue的diff算法去尋找dom的差異性就會按照index從上往下去找其中的區(qū)別，就導(dǎo)致刪除的永遠(yuǎn)是最后一項(xiàng)。

完整測試代碼：

<template>
  <div id="demo">
    <Row>
      <Col span="9">
        <div class="demo-input">
          <Input
            v-model="value"
            maxlength="10"
            show-word-limit
            clearable
            placeholder="請輸入添加項(xiàng)..."
            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>數(shù)據(jù)展示區(qū):</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: {
    //添加子項(xiàng)
    handleAdd() {
      this.dataList.push({
        id: new Date().getTime(),
        label: this.value,
      });
      this.value = "";
      console.log(this.dataList);
    },
    //刪除子項(xiàng)
    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;
}
/* 進(jìn)場的瞬間與離場的效果添加 */
.myfade-enter,
.myfade-leave-to {
  opacity: 0;
  transform: translateX(200px);
}
</style>

運(yùn)行結(jié)果：

transition-group.gif