老师你好，这里的删除，为啥没有过渡效果啊

<!DOCTYPE html>

<head>

<style>

.v-enter-from, .v-leave-to {

opacity: 0;

transform: translateY(30px);

}

.v-enter-active, .v-leave-active {

transition: all 1s ease-in;

}

.v-enter-to {

opacity: 1;

transform: translateY(0px);

}

.v-leave-from {

opacity: 1;

transform: translateY(0px);

}

.v-move {

transition: all 1s ease-in;

}

</style>

</head>

<body>

</body>

const app = Vue.createApp({

data() {

return {

list: [3, 2, 1]

}

methods: {

handleClick() {

this.list.unshift(this.list.length + 1)

handleClick2(index) {

this.list.splice(index, 1)

}

template: `

<div>

<transition-group>

</transition-group>

</div>

})

const vm = app.mount('#root')

</script>

</html>

xiao白做大事 2021-04-21

源自：vue基础入门（中） 2-5 列表动画

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2021-04-21 17:19:07

同学你好，目前可以添加如代码实现该效果：

说明：这种方法只适合从前往后删除元素或者是从中间删除元素，如果从最后一个元素开始删除是没有效果的。

示例如下：

祝学习愉快！

收起回答

好帮手慕慕子 2021-04-21 11:41:07

同学你好，老师测试同学的代码，删除也是有过渡效果的，同学可以再测试下，如下图所示：

祝学习愉快~

收起回答

提问者 xiao白做大事 #1

老师，刚才的代码不全面，代码是这样的
<!DOCTYPE html>
<html lang="en">
<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>2-6列表动画</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .v-enter-from, .v-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active, .v-leave-active {
            transition: all 1s ease-in;
        }
        .v-enter-to {
            opacity: 1;
            transform: translateY(0px);
        }
        .v-leave-from {
            opacity: 1;
            transform: translateY(0px);
        }
        .v-move {
            transition: all 2s ease-in;
        }
        .span-item {
            display: inline-block;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                list: [3, 2, 1]
             }
        },
        methods: {
            handleClick() {
                this.list.unshift(this.list.length + 1)
            },
            handleClick2(index) {
                this.list.splice(index, 1)
            }
        },
        template: `
        <div>
            <transition-group>
               <span class="span-item" v-for="(item, index) in list" :key="item" @click="handleClick2(index)">{{item}}</span>
            </transition-group>
            <button @click="handleClick">增加</button>
        </div>
        `
    })

    const vm = app.mount('#root')
</script>
</html>

当增加元素的时候，整体的移动是有效果的，但是删除元素的时候，没有过渡效果，为什么？

2021-04-21 16:13:06