如何实现导航栏双向瞬时布局切换，同时保留悬停过渡效果？

你的问题出在全局设置了transition: 0.5s，当视口从小于1080px切换回大于1080px时，导航栏的position、height等属性变化会触发这个过渡，导致出现不必要的动画。要实现双向瞬时切换，同时保留侧边栏hover的平滑过渡，需要精准控制过渡的生效范围：

修改后的CSS代码 #

.navbar {
  position: fixed;
  display: flex;
  z-index: 3;
  width: 70px;
  background-color: black;
  height: 100%;
}

/* 仅在非移动端时，给宽度变化添加过渡 */
@media (width > 1080px) {
  .navbar {
    transition: width 0.5s;
  }
  
  .navbar:hover {
    width: 200px;
  }
}

@media (width < 1080px) {
  .navbar {
    position: sticky;
    transition: none;
    flex-direction: row;
    width: 100%;
    height: 100px;
  }
  
  .navbar:hover {
    width: 100%;
  }
}

关键修改说明 #

1. 移除.navbar全局的transition属性，避免所有属性变化都触发过渡
2. 在width > 1080px的媒体查询中，给.navbar添加transition: width 0.5s，仅让宽度变化（hover时）触发平滑过渡
3. 移动端媒体查询中保留transition: none，确保横向导航栏状态下无任何过渡

这样调整后，侧边栏和横向导航栏之间的双向切换都是瞬时完成的，同时侧边栏的hover宽度变化依然保持平滑过渡效果。

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