TransitionGroup 过渡组

简介

TransitionGroup 是对 vue transition-group 的简单封装，预设了一些动画效果。

代码演示

基础演示

<template>
  <el-button @click="insert">随机插入</el-button>
  <el-button @click="reset">重置</el-button>
  <el-button @click="shuffle">打乱</el-button>

  <co-transition-group effect="slide" tag="ul">
    <li v-for="item in items" class="item" :key="item">
      {{ item }}
      <el-button @click="remove(item)">x</el-button>
    </li>
  </co-transition-group>
</template>

<script lang="ts" setup>
import { shuffle as _shuffle } from 'lodash-es';
import { ref } from 'vue';

const getInitialItems = () => [1, 2, 3, 4, 5];
const items = ref(getInitialItems());
let id = items.value.length + 1;

function insert() {
  const i = Math.round(Math.random() * items.value.length);
  items.value.splice(i, 0, id++);
}

function reset() {
  items.value = getInitialItems();
  id = items.value.length + 1;
}

function shuffle() {
  items.value = _shuffle(items.value);
}

function remove(item: number) {
  const i = items.value.indexOf(item);
  if (i > -1) {
    items.value.splice(i, 1);
  }
}
</script>

API

TransitionGroupProps

属性	描述	类型	默认值
effect	动画效果	'slide' | 'flip' | 'fade'	'fade'

TransitionGroupSlots

插槽	描述	属性
default	定义默认内容	-