ReactJS react-motion <Motion/> with calc() from CSS

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/> 的大小，但我还希望 <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>
    )
  }
}

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

ReactJS react-motion <Motion/> with calc() from CSS

ReactJS react-motion <Motion/> with calc() from CSS

css

reactjs

react-motion