使用max-height模拟、@keyframes定义关键帧或JavaScript动态计算高度，可实现导航菜单平滑展开收起。1. 通过设置max-height与overflow:hidden结合transition实现简单动画；2. 利用@keyframes对已知高度进行精确动画控制，配合forwards保持最终状态；3. 借助JavaScript读取scrollHeight实现真正自适应height动画，适用于动态内容。根据场景选择合适方案可突破height:auto无法动画的限制。
导航菜单的折叠展开效果在响应式设计中非常常见，使用CSS动画结合 height 属性与 @keyframes 能实现平滑过渡。虽然 height: auto 无法直接参与动画插值，但通过一些技巧可以模拟出自然的展开收起效果。
由于 height: auto 不能被 CSS 动画直接驱动，一个常用方法是使用 max-height 来代替。设置一个足够大的 max-height 值，在展开时生效，收起时设为 0，并配合 overflow: hidden 实现内容隐藏。
示例代码：
<nav class="menu"><ul class="menu-list"><li>首页</li><li>产品</li><li>关于</li></ul></nav><button class="toggle-btn" onclick="this.classList.toggle('active')">
切换菜单
</button>这种方式简单有效，适合内容高度相对固定的场景。缺点是如果 max-height 设置过大（如 1000px），动画时间可能显得拖沓。
立即学习“前端免费学习笔记（深入）”；
如果需要更精确控制 height 的变化过程，可以借助 @keyframes 定义关键帧动画。虽然不能直接对 height: auto 做动画，但可以针对特定已知高度设置关键帧。
示例：预知菜单高度时的 keyframes 动画
JavaScript 控制类名切换即可触发动画：
<script> function toggleMenu() { const menu = document.querySelector('.menu-animated'); if (menu.classList.cont<a style="color:#f60; text-decoration:underline;" title= "ai"href="https://www.php.cn/zt/17539.html" target="_blank">ains('open')) { menu.classList.replace('open', 'closed'); } else { menu.classList.replace('closed', 'open'); } } </script>注意：forwards 保持动画结束后的最终状态，避免动画完成后跳回初始值。
为了兼容不同设备和屏幕尺寸，可使用 JavaScript 动态获取元素展开后的实际高度，再注入到 CSS 变量或内联样式中，实现真正“自适应”的 height 动画。
实现思路：
示例代码片段：
<script> function animateMenuToggle(menuElement) { const isOpen = menuElement.style.height === 'auto'; <p>if (isOpen) { menuElement.style.height = menuElement.scrollHeight + 'px'; // 触发<a style="color:#f60; text-decoration:underline;" title= "重绘"href="https://www.php.cn/zt/70565.html" target="_blank">重绘 setTimeout(() => { menuElement.style.height = '0'; }, 10); } else { menuElement.style.height = '0'; // 强制布局以读取 scrollHeight menuElement.offsetHeight; menuElement.style.height = menuElement.scrollHeight + 'px'; }<p>menuElement.addEventListener('transitionend', () => { if (menuElement.style.height !== '0px') { menuElement.style.height = 'auto'; } }, { once: true }); }</script>这种方法最灵活，适用于内容动态变化的导航菜单，能真正实现基于 height 的流畅动画。
基本上就这些。合理选择 max-height 过渡、@keyframes 关键帧或 JS 动态计算，能让导航菜单的折叠展开既顺滑又可靠。关键是理解 height: auto 不可动画的本质，并用合适方式绕过限制。
以上就是CSS动画如何实现导航菜单折叠展开_height与@keyframes结合应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
948
收藏
