我正在处理一个导航栏，它使用交叉点观察器来缩小，它相应地添加了一个类，但当转换开始时，它从0填充开始.
在这里，当添加.NAV滚动时，css属性也会添加到导航栏中.但就在它相加的时候，填充开始从0过渡.我能做什么?
const nav = document.querySelector("nav");
const sectionOne = document.querySelector(".intersection");
const sectionOneObserver = new IntersectionObserver(function(entries, sectionOneObserver) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
nav.classList.add("nav-scrolled")
} else {
nav.classList.remove("nav-scrolled")
}
});
});
sectionOneObserver.observe(sectionOne).nav-container {
display: flex;
justify-content: center;
}
nav {
position: fixed;
width: 100vw;
padding-block: 20px;
display: flex;
justify-content: space-between;
align-items: center;
transition: 1s ease;
}
nav>* {
margin-inline: 5%;
}
nav>div {
width: 300px;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
padding-block: 10px;
}
.nav-scrolled {
width: 80%;
padding-block: 15px;
font-size: 20%;
border-radius: 20px;
transform: translateY(15px);
}
.nav-scrolled>* {
margin-inline: 15px;
}
.intersection{height:10vh}
.body{color:red; height:120vh}<div class="nav-container">
<nav>
<a href="#">
<h1>Heading</h1>
<h2>Heading-2</h2>
</a>
<div>
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
</div>
</nav>
</div>
<div class="intersection"></div>
<div class="body"><div>