I've been attempting to implement animation transitions on a removed class, but unfortunately it's not working as expected. I referenced this link: CSS transition when class removed
I have tried setting the transition on the parent element and on two dynamically assigned classes, but none of these approaches seem to be successful.
The scenario I am dealing with involves changing classes based on
scroll greater than the offsetHeight of the section elementHere is a snippet of 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 styles:
.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;
}
.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 structure:
<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}
>
Homepage
</NavLink>
</li>
<li>
<NavLink
onClick={this.goToAbout}
to="/"
activeClassName={
window.pageYOffset > this.scroll ? "active-main" : ""
}
className="link-left"
>
About Us
</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="/gallery">
Gallery
</NavLink>
</li>
<li>
<NavLink exact activeClassName="active-main" to="/video">
Video
</NavLink>
</li>
</ul>
</div>
</nav>
</div>