Question

我正在尝试在已删除的类上应用动画过渡，但无法正常工作我点击此链接： CSS transition when class removed

而且我尝试将过渡设置为父元素和两个动态类，但没有任何效果。

我正在更改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;}
  }

CSS3-删除类的过渡

1 个答案: