Dynamic List Render Animation on Vuejs and TailwindCSS

Vuejs 3.2.47
TailwindCSS 3.3.2

The Code

<ul class="transition-all" ref="list_container">
    <TransitionGroup name="list">
    <li v-for="(itme, id) in itme_list" :key="id">
        {{ item.name }}
    </li>   
    </TransitionGroup>
</ul>

let list_container = ref()
const animateHeight = function () {
    // set the new height as desired according to the number of list items,
    // below is just an example that doubles the height 
    let new_height = list_container.value.style.height*2
    list_container.value.style.height = newHeight
}

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateY(-30px);
}

Explaination

The Original List

<ul>
    <li v-for="(itme, id) in itme_list" :key="id">
        {{ item.name }}
    </li>   
</ul>

animate Container Height Changes

utilize CSS transition to automatically animate the change of height in the container.

<ul class="transition-all" ref="list_container">
    <li v-for="(itme, id) in itme_list" :key="id">
        {{ item.name }}
    </li>      
</ul>

let list_container = ref()
const animateHeight = function () {
    // set the new height as desired according to the number of list items,
    // below is just an example that doubles the height 
    let new_height = list_container.value.style.height*2
    list_container.value.style.height = newHeight
}

animation on Items Increase/Decrease

<TransitionGroup name="list">
    <li v-for="(itme, id) in itme_list" :key="id">
        {{ item.name }}
    </li>   
</TransitionGroup>

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateY(-30px);
}