ReactJS реагирует на движение <Motion /> с помощью calc() из 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/> чтобы быть оживленным, поднимаясь в переводе, пока я прокручиваю вниз (быть скрытым), и появляюсь / опускаюсь, когда прокручиваю вверх. У меня уже все работает, но я просто скучаю по этому calc() часть.

Я просто не уверен, как справиться с этим, комбинируя обе вещи. У кого-нибудь есть опыт с этим? Любая помощь будет оценена.

Спасибо за ваше время и спасибо за чтение!

Изменить: Вот рабочий пример того, чего я хочу достичь. Я не пользуюсь 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>
    )
  }
}

Возможно, это было не лучшее решение, но оно работает. Я довольно новичок в программировании, поэтому, если кто-то знает что-то лучше, пожалуйста, дайте мне знать! Всегда готов учиться.