vue css菜单上没有动画展开答案

【问题标题】：vue css no animation on menu expandvue css菜单上没有动画展开
【发布时间】：2021-09-20 05:28:52
【问题描述】：

动画适用于折叠，但不适用于展开。

我为最大高度添加了 css 样式，但动画仅适用于菜单折叠。

<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>

https://codepen.io/wgf4242/pen/XWRKORW

【问题讨论】：

标签： css vue.js animation

【解决方案1】：

只需添加

  overflow: hidden;

到你的 .menu 类，而不是 .menu.fold

动画将开始工作，但请记住，展开动画将比折叠动画更快，因为浏览器用于计算的尺寸不同：展开时 0 => 300 像素，折叠时 72 像素 => 0。您可以通过为菜单添加额外的包装器并将 max-height 设置为单击时的实际大小来解决此问题

【讨论】：