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/>的大小，但是我还希望通过在translateY中向上移动<NavBar/>来制作动画当我向下滚动（隐藏）并在向上滚动时出现/向下滚动。我已经做好了所有工作，但是我只是缺少此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>
    )
  }
}

也许这不是最好的决定，但它可行。我对编程还很陌生，所以如果有人知道更好的东西，请告诉我！总是愿意学习。

来自CSS

1 个答案: