Before removing an item from my data table, I want to implement a CSS animation. The deletion is initiated by the @click event. I would like to preview the effect of my animation (class delete_animation) before proceeding with the actual removal.
var vm = new Vue({
el: '#app',
data: {
addedId: null,
array: [
{ id: 1, text: "lorem ipsum" },
{ id: 2, text: "lorem ipsum" },
]
},
methods: {
add() {
this.addedId = this.array[this.array.length - 1].id + 1;
this.array.push({ id: this.addedId, text: "lorem ipsum"} );
},
remove(item, index) {
this.array.splice(index, 1);
this.addedId = null;
// ???
}
}
});table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
.add_animation {
animation: addItem 1s;
}
@keyframes addItem {
0% {
background-color: green;
}
100% {
background-color: white;
}
}
.deleted_animation {
animation: deleteItem 1s;
}
@keyframes deleteItem {
0% {
background-color: red;
}
100% {
background-color: white;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<div id="app">
<table>
<tr v-for="(index, item) in array" :key="item.id" :class="addedId == item.id ? 'add_animation' : ''">
<td>{{ item.text }}</td>
<td> <button type="button" @click="remove(item, index)">remove</button></td>
</tr>
</table>
<button type="button" @click="add()">Add</button>
</div>I'm looking to reverse the action of the "add" button using events that wait for the animation to complete. Possibly triggering a click once the animation has been displayed, but not quite sure how to achieve this...
Thank you!