[英]Css3 - transition on removing class
I'm trying to apply animation transition on removed class, but It's not working I followe this link: CSS transition when class removed 我正在尝试在已删除的类上应用动画过渡,但无法正常工作,我遵循以下链接: 删除类时的CSS过渡
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. 我正在更改scroll > offsetHeight of section element
类,并且当它大于我想要添加类并仅将动画高度设置为0到100px时,而当其更低时,我想将高度设置为100px到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: 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: 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>
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 删除类时,您必须具有另一个类,然后需要添加另一个类,例如leaving
该类,它将包含您的最终动画
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 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;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.