How do I smoothly reduce a divs height to 0 in VueJS? - vue.js

Question

I've tried and failed for hours now. The way I've done it is in onMounted() I first div = document.GetElementByID. Then, div.style.height = '0';. However, since this is being run from inside onMounted(), it doesn't animate or transition it, even though I have all the necessary Tailwind classes for it to do so (note that it successfully resizes the div to 0 height, but there's no animation or transition). I even tried to put the div.style.height = '0' into a seperate function outside onMounted() which didn't work. The only thing that animates or transitions is opacity. And only that. Why? Why not height or anything else? What do I have to do to make it work?
<template>
<div v-if="props.state == 2" class="w-full bg-[#E7685D] text-black text-2xl overflow-hidden duration-500 ease-in-out" id="alert">
<p class="text-center p-2">text</p>
</div>
</template>
<script>
import { onMounted } from '#vue/runtime-core'
onMounted(() => {
const alert = document.getElementById('alert');
setTimeout(() => { alert.style.height = '0%', 5000 })
})
const props = defineProps({
state: String
})
</script>

Answer 1

Maybe that's not animating because of your wrong syntax for setTimeout function. setTimeout(() => { alert.style.height = '0%', 5000 }). You've to define milliseconds out of the function brackets {...} in case you want a 5 seconds delay before execution of the setTimeout function. Given below is the right syntax for the setTimeout function.
Syntax: setTimeout(function, milliseconds, param1, param2, ...)
setTimeout(() => {
alert.style.height = '0%'
}, 5000)
Edited:
I'm not sure! Maybe adding the transition/animation classes in the setTimeout will do the trick.
setTimeout(() => {
alert.classList.add("duration-500", "ease-in-out")
alert.style.height = '0%'
}, 5000)
If it didn't work, try moving lines up/down in the setTimeout function.