Css3 - переход на удаление класса

Question

Я пытаюсь применить анимацию перехода на удаленный класс, но это не работает Я перехожу по этой ссылке: CSS-переход при удалении класса

И я попытался установить переход к родительскому элементу и двум динамически классам, но ничего не работает.

Я изменяю классы на scroll > offsetHeight of section element, и когда это больше, чем я хочу добавить высоту класса и анимации только от 0 до 100px, а когда она ниже, я хочу установить высоту от 100px до 0.

Мой код:

let nav = document.querySelector(".nav-container");
document.addEventListener("scroll", () => {
      if (window.pageYOffset > 200) {
        nav.classList.remove("nav-container-helper");
      } else {
        nav.classList.add("nav-container-helper");
      }
      if (window.pageYOffset > this.navImg) {
        nav.classList.add("navigation-container-scroll");
      } else {
        if (nav.classList.contains("navigation-container-scroll")) {
          nav.classList.remove("navigation-container-scroll");
        }
      }
    });

CSS:

.nav-container {
  position: absolute;
  top: 0;
  z-index: 1070;
  width: 100vw;
  height: 0;
  overflow: hidden;
  transition: 0.25s height linear;
}
.nav-container-helper {
  height: 100px;
  //transition: .5s height;
}

.navigation-container {
  height: 100vh;
}
.navigation-container-scroll {
  height: 100px;
  position: fixed;
  top: 0;
  background-color: $white;
  border-bottom: 4px solid $main-color;
  transition: 0.25s height linear;
}

HTML:

<div className="nav-container">
        <nav className="main-nav">
          <div className="nav-wrapper container">
            <ul className="container navigation">
              <li>
                <NavLink
                  className="link-left"
                  exact
                  activeClassName="active-main"
                  to="/"
                  onClick={this.goToTop}
                >
                  Strona Główna
                </NavLink>
              </li>
              <li>
                <NavLink
                  onClick={this.goToAbout}
                  to="/"
                  activeClassName={
                    window.pageYOffset > this.scroll ? "active-main" : ""
                  }
                  className="link-left"
                >
                  O Nas
                </NavLink>
              </li>
              <li className="logo-container">
                <NavLink className="brand-logo" to="/">
                  <img src="./logo_studio.png" alt="" />
                </NavLink>
              </li>
              <li>
                <NavLink exact activeClassName="active-main" to="/galeria">
                  Galeria
                </NavLink>
              </li>
              <li>
                <NavLink exact activeClassName="active-main" to="/wideo">
                  Wideo
                </NavLink>
              </li>
            </ul>
          </div>
        </nav>
      </div>

Answer 1

У вас должен быть другой класс, когда вы удалите класс, затем вам нужно добавить другой класс, такой как leaving, он будет содержать вашу конечную анимацию

Попробуйте это:

    let nav = document.querySelector(".nav-container");
    document.addEventListener("scroll", () => {
          if (window.pageYOffset > 200) {
            nav.classList.add("nav-leaving");
            nav.classList.remove("nav-container-helper");
            setTimeout(() => {
               nav.classList.remove("nav-leaving");
            }, 200);
          } else {
            nav.classList.add("nav-container-helper");
          }
          if (window.pageYOffset > this.navImg) {
            nav.classList.add("navigation-container-scroll");
          } else {
            if (nav.classList.contains("navigation-container-scroll")) {
              nav.classList.remove("navigation-container-scroll");
            }
          }
        });

Css

.nav-container.leaving {
  -webkit-animation: removeHeight 200ms forward; /* Safari 4.0 - 8.0 */
  animation: removeHeight 200ms forward;
}
@keyframes removeHeight {
     from {height: 100px;}
     to {height: 0;}
  }