.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 пикселей. Однако перехода у него нет. Я просто хочу облегчить изменение высоты. Каждый класс, на который он изменяется, имеет свой набор свойств "height".

Интересно, есть ли способ сделать это без jquery ui.

Answer 1

Удалите правило !important, чтобы вы не переопределяли стили. Это должно быть наилучшей практикой.

Обновление: Добавлен фрагмент без использования 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;
}