Vue点击删除商品条目时如何先播放垃圾桶动画再执行删除操作

问题根因 #

你现有代码的垃圾桶动画完全依赖隐藏checkbox的:checked伪类触发，但是点击事件触发后没有修改checkbox的选中状态，因此动画不会执行，只有删除延迟生效。

修复方案 #

1. 修改模板代码，新增选中状态绑定

<template>
    <div id="delete-button" @click.prevent="removeProductFromCart(item.id)">
        <!-- 新增v-model绑定选中状态，多组件复用时建议将id改为class避免重复 -->
        <input type="checkbox" id="checkbox" v-model="isChecked">
        <div id="bin-icon">
            <div id="lid"></div>
            <div id="box">
                <div id="box-inner">
                    <div id="bin-lines"></div>
                </div>
            </div>
        </div>
    </div>
</template>

2. 修改脚本代码，调整执行逻辑

<script>
import cartHelper from "../helpers/cartHelper";

export default {
    props: {
        item: Object,
    },
    data() {
        return {
            loading: false,
            isChecked: false // 新增控制checkbox选中的状态
        };
    },
    methods: {
        removeProductFromCart(id) {
            // 防止重复点击触发多次逻辑
            if (this.isChecked || this.loading) return
            this.loading = true
            // 先将checkbox设为选中，触发CSS动画
            this.isChecked = true
            // 动画总时长约1100ms（0.1s延迟 + 0.8s抬起动画 + 0.2s回落摇晃动画），延迟对应时间后执行删除
            setTimeout(() => {
                cartHelper.removeFromCart(id, (response) => {
                    this.$store.dispatch('removeProductFromCart', {
                        cart: response.data,
                    })
                    this.loading = false
                });
            }, 1100)
        }
    };
</script>

可选优化方案（更精准） #

可以监听动画结束事件触发删除，避免动画时长调整后需要同步修改定时器时间，无需硬编码延迟时长：

1. 模板中给盖子元素加动画结束监听

<div id="lid" @animationend="handleAnimationEnd"></div>

2. 脚本中新增对应逻辑

data() {
    return {
        loading: false,
        isChecked: false,
        pendingDeleteId: null // 存储待删除的条目id
    }
},
methods: {
    removeProductFromCart(id) {
        if (this.isChecked || this.loading) return
        this.loading = true
        this.pendingDeleteId = id
        this.isChecked = true
    },
    handleAnimationEnd(e) {
        // 监听最后一个执行的动画shake_l结束后再执行删除
        if (e.animationName === 'shake_l') {
            cartHelper.removeFromCart(this.pendingDeleteId, (response) => {
                this.$store.dispatch('removeProductFromCart', {
                    cart: response.data,
                })
                this.loading = false
            });
        }
    }
}

注意事项 #

如果页面中存在多个删除按钮组件，不要使用固定id选择器，把所有id改为class，CSS里的选择器也同步替换为类选择器，避免id重复导致样式和动画异常。

内容的提问来源于stack exchange，提问作者magic bean