css - ReactJS react-motion 与来自 CSS 的 calc()

Question

我正在尝试使用 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()为了主动调整 <NavBar/> 的大小根据字体大小和视口(viewport)，但我也想要 <NavBar/>当我向下滚动(隐藏)时通过在 translateY 中上升来动画，当我向上滚动时出现/下降。我已经做好了所有工作，但我只是想念这个 calc()部分。

我只是不确定如何在结合这两者的同时处理这个问题。有人对这个有经验么？任何帮助将不胜感激。

感谢您的宝贵时间，也感谢您的阅读!

编辑:Here's a working example of what I want to achieve .我没有使用 calc()这就是问题所在，但这只是为了展示预期的目标。

Answer 1

设法通过在 <Motion> 范围之外进行计算来解决这个问题.所以像这样:

let calc, vw, em

class Layout extends Component {

  componentDidMount(){
    vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    em = scales.baseFont
    calc = 3.25 * em + 0.5 * 0.01 * vw
  }
  render () {

    return (
      <Motion
      defaultStyle={{
        y: 0,
        opacity: 1
      }}
      style={{
        y: spring(this.state.navBarOpen ? 0 : -calc),
        opacity: spring(this.state.navBarOpen ? 1 : 0)
      }}
      >
      {style => (
        <NavBar
          style={{
            transform: `translateY(${style.y})`,
            opacity: style.opacity
          }}
          clickedOpenMenu={this.onClickMenuSwitchHandler}
        />
      )}
      </Motion>
    )
  }
}

也许这不是最好的决定，但它确实有效。我对编程很陌生，所以如果有人知道更好的东西，请告诉我!始终乐于学习。