VUE3之Animation（二）

transition-group

transition-group有以下特点：

默认情况下，它不会渲染一个元素的包裹器，但是你可以指定一个元素并以tag attribute进行渲染;

过渡模式不可用，因为我们不再相互切换特有的元素;

内部元素总是需要提供唯一的key attribute值;

CSS过渡的类将会应用在内部的元素中，而不是这个组/容器本身;

基本使用：对一个列表中删除或增加的数字增加动画

在transition-group标签中增加一个tag属性，那么其中的元素都会被包裹在这个tag指定的容器里面：

<template>
    <div>
        <button @click="addNum">添加数字</button>
        <button @click="removeNum">删除数字</button>

        <transition-group tag="p" name="sk">
            <span v-for="item in numbers" :key="item" class="item">
                {{item}}
            </span>
        </transition-group>
    </div>
</template>

增加、删除数字的逻辑：

<script>
    export default {
        data() {
            return {
                numbers:[1,2,3,4,5,6,7,8,9],
                numberCounter:10
            }
        },
        methods: {
            addNum(){
                this.numbers.splice(this.randomIndex(),0,this.numberCounter++);
            },
            removeNum(){
                this.numbers.splice(this.randomIndex(),1);
            },
            randomIndex(){
                return Math.floor(Math.random()*this.numbers.length);
            }
        },
    }
</script>

动画的实现还是使用的transition的类：

<style scoped>
    .item{
        margin-right: 10px;
        display: inline-block;
    }

    .sk-enter-from,
    .sk-leave-to{
        opacity: 0;
        transform: translateY(30px);
    }

    .sk-enter-active,
    .sk-leave-active{
        transition: all 1s ease;
    }
</style>

为队列中的其它数字增加动画效果：vue中已经帮助我们考虑到了这种情况，因此只需要使用transition的-move类就可以实现了：

<style scoped>
    .item{
        margin-right: 10px;
        display: inline-block;
    }

    .sk-enter-from,
    .sk-leave-to{
        opacity: 0;
        transform: translateY(30px);
    }

    .sk-enter-active,
    .sk-leave-active{
        transition: all 1s ease;
    }

// 防止在删除过程中其它元素动画因为被占位了而不生效的问题
    .sk-leave-active{
        position: absolute;
    }

    .sk-move{
        transition: transform 1s ease;
    }
</style>