I have items that are retrieved through API calls and users can add them to their cart. They also have the option to delete items from the cart, but I want the item to be visually removed from the front-end after 1 second because of an animation on the delete button. This is how my cart looks like:
https://i.sstatic.net/VTOKi.png
When the delete button (bin icon) is clicked, the item should be deleted but I want it to visually disappear after a delay of 1 or 2 seconds. Here is the code snippet:
<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) {
cartHelper.removeFromCart(id, (response) => {
this.loading = true;
this.$store.dispatch('removeProductFromCart', {
cart: response.data,
})
setTimeout(() => this.loading = false, 1000);
});
},
}
};
</script>
Even though I've set a timeout for 1 second, the item is being deleted immediately without waiting. Any ideas why this might be happening?