I have a ticket as you see in the picture below:

So the ticket includes the Bin component which is the bin icon you see and it has an animation when you click the cap of the bin goes up and comes back again. So I wanted to delete this ticket with delay because I want to show the animation that I mentioned.Here is my delete component:

<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>

and the css for the bin and animation:

#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); }
}

So overall, when I click the bin icon I want the ticket to be deleted but after a bit of delay because I want to show the animation of the bin (the cap goes up and down). But like this, it only deletes it (without animation), just with delay. So I wonder how can I solve this problem. I am working with Vue but it might have js or css solution.

CodePudding user response：

I think it's because your checkbox never gets "checked".
You can either add that inside your method or you can just wrap that block with a label.

<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>