Css3 - 移除类的过渡答案

【问题标题】：Css3 - transition on removing classCss3 - 移除类的过渡
【发布时间】：2019-04-10 02:51:05
【问题描述】：

我正在尝试对已删除的类应用动画过渡，但它不起作用我按照这个链接： 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>

【问题讨论】：

标签： javascript html css reactjs animation

【解决方案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;}
  }

【讨论】：