时间戳

首页 > 解决方案 > ReactJS 反应运动使用 CSS 中的 calc()

css - ReactJS 反应运动使用 CSS 中的 calc()

问题描述

我正在尝试在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()在那里使用，这就是问题所在，但这只是为了显示预期的目标。

标签： cssreactjsreact-motion

解决方案

设法通过在范围之外进行计算来解决这个问题<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>
    )
  }
}

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

推荐阅读