If I want to showcase a group of elements appearing one by one instead of all at once, I can achieve this by wrapping a v-for loop in a transition-group. Here's how:
<script setup>
import {onMounted, reactive} from "vue";
const state = reactive({
hover: false,
fadeInArray: [false, false, false, false, false]
})
onMounted(() => {
let val = 0;
setInterval(() => {
state.fadeInArray[val] = true
val++
if (val == state.fadeInArray.length) {
clearInterval()
}
}, 2000)
})
</script>
<template>
<transition-group name="fade-1">
<div class="partner-wrap" v-for="(partner, key) in [1,2,3,4,5]" :key="key">
<p v-if="state.fadeInArray[key]">I am fading in!</p>
</div>
</transition-group>
</template>
Even though the transition may not be working as expected and the elements seem to pop in without animation. Consider checking the provided transition scss:
.fade-1 {
&-enter-active, &-leave-active {
transition: all 1s;
}
&-enter-from, &-leave-to {
opacity: 0;
}
}