Transform: не работает анимация

Question

Я хочу добиться «слепого эффекта», при котором нажатие кнопки приведет к оживлению наложенного элемента div, поэтому в верхней части экрана отображается только небольшая часть, а ниже отображается элемент div.

Я использую гэтсби с реактивной пружиной и стильными компонентами.Я установил «слепой» как компонент следующим образом: -

const HeroWrapper = styled(animated.div)`
  background-color: blue;
  height: 100vh;
  width: 100vw;
  text-align: center;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  z-index: 15;
`
const HeroTitle = styled.h1`
  margin: auto;
  color: whitesmoke;
`

const Hero = () => {
  const [isHeroOpen, setHeroOpen] = useState(true)
  const heroAnimation = useSpring({
    transform: isHeroOpen ? `translate3d(0,0,0)` : `translate3d(0, -85%, 0)`,
  })

  return (
    <HeroWrapper style={heroAnimation} onClick={() => setHeroOpen(!isHeroOpen)}>
      <HeroTitle>I am a Hero Blind</HeroTitle>
      <div style={{ paddingBottom: '40px' }}>
        <button type="button" onClick={() => setHeroOpen(!isHeroOpen)}>
          Click
        </button>
      </div>
    </HeroWrapper>
  )
}

Однако анимация не работает с transform: translate.Если я заменю это анимацией на цвет фона ...

    backgroundColor: isHeroOpen ? `#66666666` : `green`,

... все будет работать нормально, так что все будет работать с переключателем состояния.

Также, если я изменю преобразование: перевод в инструментах разработчика, это также работает - так что я делаю не так?

Большое спасибо

Answer 1

Это был тяжелый. Очевидно, что для правильной интерполяции необходимо включить знак процента для первого перевода, а также для реактивной пружины.

const heroAnimation = useSpring({
  transform: isHeroOpen ? `translate3d(0,0%,0)` : `translate3d(0,-85%,0)`
});

Вот песочница для него: https://codesandbox.io/s/focused-maxwell-1m8vq