Vue使用CSS实现菜单过渡动画仅折叠生效展开无动画如何解决

• 你当前仅在折叠状态的.fold类中声明了overflow: hidden，展开时该属性失效，过渡过程中菜单内容会直接全部溢出显示，因此看不到max-height变化的动画过程。
• 过渡规则重复声明不会导致问题，但统一放在基础类更易维护。

仅需要调整CSS部分即可，把overflow: hidden移到.menu基础类中：

<style scoped>
.menu {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.menu.fold {
  max-height: 0;
}
</style>

如果菜单高度不固定，可以把max-height设置为比所有场景下的菜单最大高度稍大的值即可，避免和实际高度差太多导致过渡速率不均匀。

内容的提问来源于stack exchange，提问作者wgf4242