vue添加元素,删除元素过渡效果

vue项目中,如果删除或添加元素,如果没有动画过渡效果,会显着很生硬,用户体验不好

使用transition-group标签

<transition-group name="tag">
    <div
      class="name-tags"
      v-for="item in listTags"
      :key="item.tempId ? item.tempId : item.id"
      :class="[item.checkedState === '1'?'selectTag':'']"
      @click="changeTagsStatus(item)"
    >{{ item.tagName }}
      <van-icon name="clear" class="close-icon" @click.stop="deleteTag(item)"/>
      <!-- <van-icon name="close" /> -->
    </div>
</transition-group>

在css中设置动画样式

.tag-enter-active {
  animation: tagFrames 0.5s linear;
}
.tag-leave-active {
  animation: tagFrames 0.5s linear reverse;
}
@keyframes tagFrames {
  from {
    // transform: translateX(100%);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}