I'm currently working on implementing a list of pop-up messages in the upper right corner of the screen. These messages should disappear when clicked and include a slide-fade transition effect.
The transition animation works fine when there is only one pop-up component, but it malfunctions when there are multiple components. I would greatly appreciate any assistance in resolving this issue. Thank you in advance.
Below is the code snippet:
popup.vue
<template>
<Transition name="slide-fade" @click="close">
<div class="bg-green-100 opacity-95 rounded-lg py-5 px-6 mb-3 text-green-700 inline-flex items-center text-sm" role="alert">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="w-8 h-8 mr-2 fill-current" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>
{{ placeholder }}
</div>
</Transition>
</template>
<script>
export default {
name: 'popupComponent',
methods: {
close () {
this.$emit('close', this.arrIndex)
}
},
props: {
placeholder: String,
arrIndex: Number
}
}
</script>
<style scoped>
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(.25,.59,.63,.92);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
</style>
App.vue:
<template>
<div class="absolute z-10 right-0 p-2 max-w-md">
<div class="flex flex-col gap-y-2 max-h-96 overflow-y-hidden">
<popup v-for="(content, index) in popup_content.slice().reverse()" :key="index" @close="closePopup" :arrIndex="(popup_status.length-1) - index" :placeholder="content"/>
</div>
</div>
</template>
<script>
import popupComponent from './components/popup.vue'
export default {
data() {
return {
popup_content: ['Awesome!', 'Nice!'],
}
},
methods: {
closePopup(index) {
this.popup_content.splice(index, 1);
}
},
components: {
'popup': popupComponent
},
name: 'App'
}
</script>