Vue官方文档

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 类，它会在元素的改变定位的过程中应用。将元素从之前的位置平滑过渡新的位置。

<style>
    .list-item{
        display: inline-block;
        margin-right: 10px;
    }
    .v-enter-from{
        opacity: 0;
    }
    .v-enter-active{
        transition: all 1s ease-in;
    }
    .v-enter-to{
        opacity: 1;
    }

    .v-leave-from{
        opacity: 1;
    }
    .v-leave-active{
        transition: all 1s ease-in;
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-move{
        transition: all 1s ease;
    }
</style>

<div id="root"></div>
<script>
    const app = Vue.createApp({
        data(){
            return {
                list:[1,2,3,4,5,6,7,8,9,10]
            }
        },
        methods:{
            handleClick(){
                this.list.unshift(this.list.length+1)
            },
        },
        template:`
        <div>
            <transition-group>
                <span class="list-item" v-for="item in list" :key="item">{{item}}</span>
            </transition-group>
            <button @click="handleClick">增加</button>
        </div>
        `
    })
    const vm = app.mount("#root")
</script>

重点就是在css中添加v-move 设置transition 可以实现列表其他元素的平滑过渡

上面演示的是在列表第一位增加内容，原来的内容平滑过渡效果。想要删除第一位的内容，理论上其他代码都不用修改，改handleClick里的内容就可以实现删除元素，其他元素平滑过渡。

handleClick(){
    this.list.splice(0,1)
},

经过测试后发现之后删除的元素有过渡动画，但是其他原来的元素没有。经过搜索引擎检索，解决问题。

参考Vue - v-move列表进入/离开的平滑过渡，官方教程学习释疑

删除数组的元素，由于删除的元素经理了一个过渡，始终占据文档流的这个位置，因此下一个元素要等待其过渡消失后再移动过来，造成一个生硬的效果。要达到平滑过渡，就要在删除元素leave-active阶段用position:absolute将其移出文档流，后面的元素才能同时平滑过渡过来。完整代码如下

<style>
    .list-item{
        display: inline-block;
        margin-right: 10px;
    }
    .v-enter-from{
        opacity: 0;
    }
    .v-enter-active{
        transition: all 1s ease-in;
    }
    .v-enter-to{
        opacity: 1;
    }

    .v-leave-from{
        opacity: 1;
    }
    .v-leave-active{
        transition: all 1s ease-in;
        position: absolute
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-move{
        transition: all 1s ease;
    }
</style>

<div id="root"></div>
<script>
    const app = Vue.createApp({
        data(){
            return {
                list:[1,2,3,4,5,6,7,8,9,10]
            }
        },
        methods:{
            handleClick(){
                this.list.splice(0,1)
            },
        },
        template:`
        <div>
            <transition-group>
                <span class="list-item" v-for="item in list" :key="item">{{item}}</span>
            </transition-group>
            <button @click="handleClick">删除</button>
        </div>
        `
    })
    const vm = app.mount("#root")
</script>