我正在尝试在calc()
模板字符串中使用时完成以下操作:
<Motion
defaultStyle={{
y: 0,
opacity: 1
}}
style={{
y: spring(this.state.navBarOpen ? 0 : `- calc(3.25em + 0.5vw)`),
opacity: spring(this.state.navBarOpen ? 1 : 0)
}}
>
{style => (
<NavBar
style={{
transform: `translateY(${style.y})`,
opacity: style.opacity
}}
clickedOpenMenu={this.onClickMenuSwitchHandler}
/>
)}
</Motion>
这里的问题是模板文字中有一个模板文字,我不知道如何避免这个问题以使动画工作。
我需要根据字体大小和视口calc()
主动调整大小,但我还希望在我向下滚动(隐藏)时在 translateY 中向上移动并在向上滚动时出现/向下移动。我已经完成了所有工作,但我只是缺少这部分。<NavBar/>
<NavBar/>
calc()
我只是不确定如何在结合这两件事时处理这个问题。有人对这个有经验么?任何帮助,将不胜感激。
感谢您的宝贵时间,感谢您的阅读!
编辑:这是我想要实现的工作示例。我没有calc()
在那里使用,这就是问题所在,但这只是为了显示预期的目标。