HTML导航布局添加过渡动画的实战教程-html教程-PHP中文网

菜单滑动不连贯因left/top触发重排，应改用transform+transition并写在默认状态；下拉抖动因height:auto不可过渡，需用max-height或scaleY；移动端:active失效需touch-action或JS模拟；动画掉帧多因box-shadow/filter滥用，应简化并用contain隔离渲染。

html导航布局添加过渡动画的实战教程

hover 时菜单项滑动不连贯？检查 `transform` 和 `transition` 是否同级触发

直接对 :hover 下的 left/top 做过渡，容易卡顿或跳变，因为这些属性会触发重排（layout）。浏览器更倾向对 transform 和 opacity 做合成层加速。

把位移逻辑从 left: 10px 改成 transform: translateX(10px)
transition 必须写在默认状态（非 hover），否则首次 hover 无动画
加上 will-change: transform 可提前提示浏览器优化（仅对高频交互项启用）

.nav-item {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-item:hover {
  transform: translateX(4px);
}

下拉菜单展开抖动？避免用 `height: 0 → auto` 过渡

height: auto 无法被浏览器计算过渡中间值，会导致瞬间展开或跳帧。真实项目里必须用可量化的值替代。

用 max-height + 固定足够大的像素值（如 max-height: 300px），再配合 overflow: hidden
初始状态设 max-height: 0，展开时设为具体值，动画才生效
若子菜单高度差异大，优先用 transform: scaleY(0) → scaleY(1) + opacity 组合

.dropdown-menu {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.2s, transform 0.2s;
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
  transform: scaleY(1);
}