.addClass/.removeClass CSS 动画不起作用

Question

我一直在尝试使用 Jquery Animate 和 CSS 但是我似乎无法让它工作；

  $(function() {
    var navShrink = $("#nav-anim");
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();

      if (scroll >= 500) {
        navShrink.removeClass("navigation").addClass("nav-shrink");
      } else {
        navShrink.removeClass("nav-shrink").addClass("navigation");
      }
    });
  });

css；

#nav-anim {
  transition: height 1s ease; 
}

.navigation {
  height: 12.5vh;
}

.nav-shrink {
  height: 7!important;
}

html 但我遗漏了我所有的内容

<div id="nav-anim" class="row navigation fixed-top no-gutters">

</div>

此代码有效，它在 500 像素后缩小了我的导航栏的高度。 但是它没有过渡。 我只是想缓解高度变化。 每个 class 更改为具有不同的“高度”属性集。

想知道没有 jquery ui 是否有办法做到这一点。

Answer 1

删除!important规则，这样您就不会覆盖 styles。 这应该是最佳实践。

更新：添加了不使用 jQuery 的片段。

 const navShrink = document.querySelector('.navigation__container'); document.onscroll = shrinkNavigation => window.pageYOffset >= 500? navShrink.classList.add('nav-shrink'): navShrink.classList.remove('nav-shrink');

 body { margin: 0; }.section { height: 3000px; background-color: lightgrey; }.navigation__container { position: sticky; top: 0; background-color: bisque; height: 12.5vh; display: flex; align-items: center; transition: all 0.4s ease; }.nav-shrink { height: 7vh; }.menu { list-style: none; }.nav-shrink.menu__item--anchor { color: white; }.menu { display: flex; flex: 1 1 auto; justify-content: space-around; }

 <div class="section"> <nav class="navigation__container"> <ul class="menu"> <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li> <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li> <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li> <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li> <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li> </ul> </nav> </div>

Answer 2

您可以将以下行添加到 CSS 中：

.navigation,
.nav-shrink {
    -webkit-transition: background-color 0.4s;
    -moz-transition: height 0.4s;
    -o-transition: height  0.4s;
    -ms-transition: height  0.4s;
    transition: height  0.4s;
}