标头转换

Question

这是我的网站，我在标题中遇到转换问题。

当我向下滚动时，

标题菜单(背景和菜单项(都有过渡，但当我向上滚动时，只有背景有过渡。

https://jsfiddle.net/CRooY3/dxpx8m9z/

header {
  width: 100%;
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  -webkit-transition: height 0.8s;
  -moz-transition: height 0.8s;
  -ms-transition: height 0.8s;
  -o-transition: height 0.8s;
  transition: height 0.8s;
}

Answer 1

您正在header.smaller .nav-menu上转换line-height，因此它仅在.smaller类上转换，而不是默认类。要在向header添加或删除.smaller时进行line-height过渡，只需将transition应用于.nav-menu

https://jsfiddle.net/dxpx8m9z/1/