Css3 - transition on removing class

Question

I'm trying to apply animation transition on removed class, but It's not working I followe this link: CSS transition when class removed

And I have tried to set transition to parent element and to two dynamically classes but nothing works.

I'm changing classes on scroll > offsetHeight of section element and when it's more than I want to add class and animate height only from 0 to 100px, and when It's lower, I want to set height from 100px to 0.

My code:

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>

score 1 · Accepted Answer · answered Nov 06 '18 at 17:38

You must have a another class when you'll removeclass, then you need add another class like leaving it it'll contain your end animation

Try this:

    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 - transition on removing class

1 Answers1