Это для компонента Navbar, который отображается только после того, как пользователь прокручивает в определенном разделе. /> Как появляется Navbar, он мерцает. Подобно, как исчезает, мерцающие. < /P>
Почему? Есть ли способ исправить это? < /P>
// Minimized the component just to have a reference.
// Navbar.jsx
const NavBar = () => {
const showNav = useScrollTrigger(ref);
return (
There are links, images, buttons in this body
);
};
// This is the existing styles.
// NavBar.scss
.container {
display: flex;
position: sticky;
top: 0;
z-index: 10;
overflow: hidden;
// lots of other padding color margin styles
opacity: 0;
margin-bottom: -60px;
visibility: hidden;
transform: translateY(-100%);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; // have tried removing this, same outcome.
}
.show {
opacity: 1;
margin-bottom: 0;
visibility: visible;
transform: translateY(0);
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... ios-device