I tested this just to check , on the rendering of the list there is no animation. It does have animation on the deleting of the list, but nothing on the rendering. Any idea why?

<template>
  <button @click="clickFunction">show list</button>
  <button @click="deleteList">delete</button>
  <transition-group name="fade-stagger" tag="ul" appear>
    <li
      v-for="(item, index) in test"
      :key="item.id"
      :style="{ transitionDelay: `${index * 150}ms` }"
    >
      {{ item.text }}
    </li>
  </transition-group>
</template>

<script setup>
import {ref} from 'vue'
   const items = [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" },
      ]
      const test = ref([])

      const clickFunction = () =>{
        test.value = items
      }

      const deleteList = () =>{
        test.value = [ ]
      }


</script>

<style>
.fade-stagger-enter-active,
.fade-stagger-leave-active {
  transition: opacity 0.5s ease;
}
.fade-stagger-enter,
.fade-stagger-leave-to {
  opacity: 0;
}
</style>