The animation only works when collapsing the menu, not when expanding it.
I tried adding CSS for setting a max-height, but the animation only functions when collapsing the menu.
<template>
<div>
<p>
<button @click="isShow = !isShow">click -- {{ isShow }}</button>
</p>
<ul ref="menu" :class="{ menu: true, fold: !isShow }">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
const menu = ref("null");
const isShow = ref(true);
</script>
<style scoped>
.menu {
max-height: 300px;
transition: max-height 0.2s ease;
}
.menu.fold {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>