如何显示动画和删除项目后

Question

我有一张票，如下图所示：

所以票证包含 Bin 组件，它是您看到的垃圾桶图标，当您单击垃圾桶的盖子时它有一个动画，垃圾桶上升并再次返回。所以我想延迟删除这张票，因为我想显示我 mentioned.Here 是我的删除组件的动画：

<template>
    <div id="delete-button" @click.prevent="removeProductFromCart(item.id)">
        <input type="checkbox" id="checkbox">
        <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>

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

export default {
    props: {
        item: Object,
    },
    data() {
        return {
            loading: false,
        };
    },
    methods: {
        removeProductFromCart(id) {
            this.loading = true;
            setTimeout(() => {
                cartHelper.removeFromCart(id, (response) => {
                    this.$store.dispatch('removeProductFromCart', {
                        cart: response.data,
                    })
                    this.loading = false
                });
            }, 1000)
        }
    };
</script>

和用于 bin 和动画的 css：

#delete-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
}
#checkbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 3;
}
#bin-icon {
    position: absolute;
    width: 26px;
}
#lid {
    position: relative;
    width: 30px;
    height: 4px;
    left: -2px;
    border-radius: 4px;
}
#lid:before {
    content: '';
    position: absolute;
    top: -4px;
    right: 0;
    left: 0;
    width: 10px;
    height: 3px;
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
}
#box {
    position: relative;
    height: 37px;
    margin-top: 1px;
    border-radius: 0 0 8px 8px;
}
#box-inner {
    position: relative;
    top: 2px;
    width: 20px;
    height: 32px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
}
#bin-lines {
    position: relative;
    top: 7px;
    margin: 0 auto;
}
#bin-lines, #bin-lines:before, #bin-lines:after {
    width: 2px;
    height: 20px;
    border-radius: 4px;
}
#bin-lines:before, #bin-lines:after {
    content: '';
    position: absolute;
}
#bin-lines:before {
    left: -8px;
}
#bin-lines:after {
    left: 8px;
}
#layer {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 0;
    height: 0;
    background-color: var(--link-text-color-hover);
    border-radius: 50%;
    transition: 0.25s ease all;
    z-index: 1;
}
#lid, #lid:before,
#box, #bin-lines,
#bin-lines:before,
#bin-lines:after {
    background-color: var(--button-color);
    transition: 0.2s ease background-color;
}
#checkbox:checked ~ #bin-icon #lid,
#checkbox:checked ~ #bin-icon #lid:before,
#checkbox:checked ~ #bin-icon #box {
    background-color: var(--link-text-color-hover);
}
#checkbox:checked ~ #bin-icon #bin-lines,
#checkbox:checked ~ #bin-icon #bin-lines:before,
#checkbox:checked ~ #bin-icon #bin-lines:after {
    background-color: var(--link-text-color-hover);
}
#checkbox:checked + #bin-icon #box {
    animation: shake 0.2s ease 0.1s;
}
#checkbox:checked + #bin-icon #lid {
    animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
}
#checkbox:checked ~ #layer {
    width: 226px;
    height: 226px;
}
@keyframes shake {
    0%{  transform: rotateZ(3deg); }
    25%{  transform: rotateZ(0);}
    75%{ transform: rotateZ(-3deg); }
    100%{ transform: rotateZ(0); }
}
@keyframes lift-up {
    0%{ top:0; }
    50%{ top:-35px;}
    100%{ top:0; }
}
@keyframes shake_u {
    0%{ transform: rotateZ(0); }
    25%{ transform:rotateZ(-15deg); }
    50%{ transform:rotateZ(0deg); }
    75%{ transform:rotateZ(15deg); }
    100%{ transform:rotateZ(0); }
}
@keyframes shake_l {
    0%{ transform:rotateZ(0); }
    80%{ transform:rotateZ(3deg); }
    90%{ transform:rotateZ(-3deg); }
    100%{ transform:rotateZ(0); }
}

总的来说，当我单击垃圾箱图标时，我希望删除票证，但经过了一些延迟，因为我想显示垃圾箱的动画（盖子上下移动）。但是像这样，它只是删除它（没有动画），只是有延迟。所以我想知道如何解决这个问题。我正在使用 Vue，但它可能有 js 或 css 解决方案。

Answer 1

我认为这是因为您的复选框从未被“选中”。
您可以将其添加到您的方法中，也可以只用标签包装该块。

<template>
    <label for="checkbox" id="delete-button" @click="removeProductFromCart(item.id)">
        <input type="checkbox" id="checkbox">
        <div id="bin-icon">
            <div id="lid"></div>
            <div id="box">
                <div id="box-inner">
                    <div id="bin-lines"></div>
                </div>
            </div>
        </div>
    </label>
</template>

如何显示动画和删除项目后

How to make show the animation and after delete item

javascript

css

vue.js

vue-component

vuejs2