在使用 React spring 和可见性传感器滚动时，我正在尝试转换导航栏的不透明度

Question

我目前正在尝试实现一个以不透明度 0 开头且高度相同的 Navbar，以创建向下滚动页面时 Navbar 下降的良好效果。我正在使用 React-spring 和 React-visibility-sensor

效果很好。但是有一个小问题，当页面启动时，导航栏会出现并先淡出，然后才能正常工作。每次页面渲染都是这样

我已经尝试了很多不同的东西，但到目前为止，当页面启动时它的不透明度为 0 时运气不好。有没有人对此有可能的解决方案。将不胜感激。

<VisibilitySensor once>
{({ isVisible }) => (
<Spring delay={300} to={{height: isVisible ? 1 : 100, opacity: isVisible ? 0 : 1}}>
{({ height, opacity }) => <header className={headerStyles.header} style={{height, opacity}}>
<div className={headerStyles.overlay}></div>
<div className={headerStyles.heroContent}>
<h1 className={headerStyles.logo}>Logo</h1>
<p className={headerStyles.brand}>
</p>
<p className={headerStyles.description}>
</p>
</div>
<nav className={headerStyles.navContainer}>
<ul className={headerStyles.navList}>
<li>
<Link to="/" activeStyle={{ color: "aqua" }} activeClassName={headerStyles.activeMenuItem}>
Home
</Link>
</li>
<li>
<Link to="/about/" activeStyle={{ color: "aqua" }} activeClassName={headerStyles.activeMenuItem}>
About
</Link>
</li>
<li>
<Link to="/blog/" activeStyle={{ color: "aqua" }} activeClassName={headerStyles.activeMenuItem}>
Blog
</Link>
</li>
<li>
<Link to="/contact/" activeStyle={{ color: "aqua" }} activeClassName={headerStyles.activeMenuItem}>
Contact
</Link>
</li>
</ul>
</nav>
</header>}
</Spring>
)}
 
</VisibilitySensor>

Answer 1

我明白了，我添加了一个不透明度为 0 的 from 值。现在我的 Navbar 工作正常了。

在使用 React spring 和可见性传感器滚动时，我正在尝试转换导航栏的不透明度

I'm trying to transition the opacity of my navbar when scrolling with React spring and Visibility sensor

transition

reactjs

react-spring