Vue 系统组件 <TransitionGroup> 简介

<TransitionGroup>动画过渡组件

用于v-for列表中元素或组件的插入、移动、顺序改变的过渡效果。

它应用于对象不是根元素，而是所有子元素，且所有子元素必需指定key属性。

它和属性、用法和<Transition>基本相同，不同的是过渡效果对象差异。

<TransitionGroup>在<Transition>属性事件上，增加了二个属性：

tag = [String 必需] 指定要渲染的元素容器

move-class = [String 可选] 用于自定义过渡期间被应用的 CSS class。 在模板中使用 kebab-case，例如 move-class="xxx"

 

与第三方集成示例： 

<template>
    <button @click="add">增加一项</button>
    <button @click="reduce">减少一项</button>
    <transition-group
        tag="ul"
        enter-active-class="animate__animated animate__flipOutY"
        leave-active-class="animate__animated animate__bounceOutRight">
        <li class="lstyle" v-for="(item,index) in lists" :key="item">{{item}}</li>
    </transition-group>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    import 'animate.css'
    import $array from '@/common/js/array.js'
    import $string from '@/common/js/string.js'
    import $number from '@/common/js/number.js'
    const lists = ref(['q', 'e', 'u', 'o', 't', 'w'])

    function add() {
        var l = $string.rndChars(1, 1)
        var rnd = $number.rndInt(0, lists.value.length - 1)
        var newArr = $array.insert(lists.value, rnd, l)
        lists.value = [].concat(newArr)
    }

    function reduce() {
        var rnd = $number.rndInt(0, lists.value.length - 1)
        lists.value.splice(rnd, 1)
    }
</script>

<style scoped>
    .lstyle {
        margin-top: 10px;
        border: 1px solid #ddd;
        height: 35px;
        line-height: 35px;
        border-radius: 20px;
        text-indent: 30px;
    }
</style>