How to make transition opacity work when element is removed? - vue.js

Question

Hi I made the following notification component for my vue app where I am looping through errors and success messages from vuex store. I am removing them after 3 seconds from the array. However this means the transition does not gets applied since the element gets removed from the DOM. How can I make that work? Please help me.
<template>
<div
id="toast-container"
class="fixed z-50 top-20 right-3"
>
<div
v-for="(error, index) in errors"
:key="error+index"
:class="`${error ? 'opacity-1 visible' : 'opacity-0 invisible'}
toast toast-error flex items-center transition-opacity`"
>
<img
svg-inline
src="#/assets/icons/alert_triangle.svg"
alt="alert icon"
>
<div class="pl-2">
<div class="toast-title">
Der er sket en fejl!
</div>
<div class="toast-message">
{{ error }}
</div>
</div>
</div>
<div
v-for="(message, index) in successMessages"
:key="message+index"
:class="`${message ? 'opacity-1 visible' : 'opacity-0 invisible'}
toast toast-success flex items-center`"
>
<img
svg-inline
src="#/assets/icons/shield_check.svg"
alt="alert icon"
>
<div class="pl-2">
<div class="toast-title">
Succes
</div>
<div class="toast-message">
{{ message }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Notifications',
computed: {
errors() {
return this.$store.state.global.errors
},
successMessages() {
return this.$store.state.global.successMessages
},
},
watch: {
errors: {
handler() {
setTimeout(() => {
this.removeError(0)
}, 3000)
},
deep: true,
},
successMessages: {
handler() {
setTimeout(() => {
this.removeSuccessMessage(0)
}, 3000)
},
deep: true,
},
},
methods: {
removeError(index) {
this.$store.commit('removeError', index)
},
removeSuccessMessage(index) {
this.$store.commit('removeSuccessMessage', index)
},
},
}
</script>

Answer 1

Have a look at https://vuejs.org/guide/built-ins/transition-group.html which is designed for this exact use case. Basically wrapping the whole v-for block with <TransitionGroup> and defining proper CSS classes is all you need to do, <TransitionGroup> will take care of animating the element and removal from DOM after animation is done, you just need to add/remove items from state.