如何选择性应用CSS解决JS控制导航图标滚动移动滞后问题

问题原因 #

你当前为.nav .menu_btn设置了transition: all 300ms ease-out，代表该元素所有属性的变化都会触发300ms的缓动过渡，你通过JS滚动修改margin-top属性时也会触发这个过渡，所以导航图标移动速度会比没有设置对应过渡的logo慢。

解决方案 #

有两种常用方案可以解决这个问题：

方案1：显式指定过渡属性，替代all关键字 #

不要用all来匹配所有属性，只指定你实际需要过渡的属性即可。从你给出的代码来看，点击菜单时的动画都是作用在.line子元素上的，.menu_btn本身不需要过渡效果，你可以直接删除.nav .menu_btn的transition配置：

.nav .menu_btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  cursor: pointer;
  /* 删掉下方四行过渡配置即可 */
  /* -webkit-transition: all 300ms ease-out 0ms;
  -moz-transition: all 300ms ease-out 0ms;
  -o-transition: all 300ms ease-out 0ms;
  transition: all 300ms ease-out 0ms; */
}

如果你后续需要给.menu_btn加其他属性的过渡，只需要显式写对应的属性名即可，比如：

transition: opacity 300ms ease-out, transform 300ms ease-out;

方案2：通过添加类名控制样式，临时禁用过渡 #

更推荐的写法是不要直接用JS修改样式属性，而是通过添加类名的方式控制状态，逻辑和样式分离更易维护：

1. 先修改JS代码，滚动时添加/移除scrolled类：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 38) {
      $(".nav").addClass("scrolled");
    } else {
      $(".nav").removeClass("scrolled");
    }
  });
})

2. 新增对应CSS配置，滚动状态下margin-top变化不触发过渡：

.nav.scrolled .menu_btn {
  margin-top: -36px;
  transition: none;
}

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