删除的时候没有缓慢返回原位的过渡效果

来源：2-5 列表动画

im镇辉

2021-11-11 15:46:45

相关代码：

相关代码：<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson</title>
    <style>
        .v-enter-from {
            opacity: 0;
            transform: translateY(-30px);
        }

        .v-enter-active {
            transition: all 0.5s ease-in;
        }

        .v-enter-to {
             opacity: 1;
            transform: translateY(0px);
        }
        .v-leave-from {
            opacity: 1;
            transform: translateY(0px);
        }

        .v-leave-active {
            transition: all 0.5s ease-in;
        }

        .v-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
        /* 当其他的列表项移动的时候，原有数据跟着移动 */
        .v-move {
            transition: all 0.5s ease-in;
        }

        .list-item {
            display: inline-block;
            margin-right: 10px;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root">
        <transition-group>
            <div class="list-item" v-for="item in list" :key='item'>{{item}}</div>
        </transition-group>
        <button @click="handleAddClick">增加</button>
        <button @click="handleDelClick">删除</button>
    </div>
    <script>
        // 列表动画的实现
        const app = Vue.createApp({
            data() {
                return {
                    list: [1, 2, 3]
                }
            },
            methods: {
                handleAddClick() {
                    this.list.unshift(this.list.length + 1);
                },
                handleDelClick(){
                    //  this.list.shift(this.list[this.list.length-1]);
                     this.list.shift(this.list[2]);
                }
            }
        })
        const vm = app.mount('#root')
    </script>
</body>


</html>

问题描述：

增加会往右挤，但是删除不会往左过渡挤回来

写回答

1回答