Javascript Css3-删除类的转换

我试图在移除的类上应用动画转换，但它不起作用 我有以下链接：

我尝试将转换设置为父元素和两个动态类，但没有任何效果

我在

scroll>Offthelight 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:

html:

斯特罗纳·戈沃纳


这是卷轴吗？“活动主节点”：”
}
className=“链接左侧”
>
O Nas




加莱里亚


威多

移除类时，必须有另一个类，然后需要添加另一个类，如

离开

它将包含结束动画

试试这个：

    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

<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>

    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");
            }
          }
        });

.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;}
  }