React-spring, как правильно анимировать буквы массива - PullRequest
Новая
       26

React-spring, как правильно анимировать буквы массива

0 голосов
/ 02 апреля 2020

В этом коде с react-spring я получаю анимацию, в которой каждая буква ожидает окончания предыдущей анимации, а также в то время, когда она анимируется

Почему это происходит и как я могу это исправить это? 

  const text = [...'hey there how are you']
  const from = { transform: 'rotateX(0deg) translateY(0px) rotate(0deg) scale(1)' }
  const to = inView
    ? [
        { transform: 'rotateX(30deg) translateY(10px) rotate(-13deg) scale(1)' },
        { transform: 'rotateX(0deg) translateY(-22px) rotate(3deg) scale(1.1)' },
        { ...from },
      ]
    : from

  const trail = useTrail(text.length, {
    config: { mass: 5, tension: 2000, friction: 200 },
    from: from,
    to: to,
  })

  return (
    <>
      <Div ref={handleRef}>
        {trail.map((props, i) => (
          <animated.span key={`char${i}`} style={props}>
            {text[i] === ' ' ? <>&nbsp;</> : text[i]}
          </animated.span>
        ))}
      </Div>
    </>
  )

CodePen

https://codesandbox.io/s/epic-buck-4ubud

1 Ответ

0 голосов
/ 02 апреля 2020

Используя useSprings Я могу получить независимые строки для каждого элемента, которые я могу отложить индивидуально

Это делается "из коробки", когда to: имеет только одно правило, но если вы хотите объединить больше правил, тогда как-то каждый элемент не зависит от других

Используя useSprings, вы можете получить эту индивидуальность 

const text = [...'hey there how are you']
  const from = { transform: 'translate3d(0,0px,0)' }
  const to = inView ? [{ transform: 'translate3d(0,-40px,0)' }, { transform: 'translate3d(0,40px,0)' }] : from

  const base = {
    config: { mass: 5, tension: 2000, friction: 200 },
    from: from,
    to: to,
  }

  const springs = useSprings(text.length, text.map((t, i) => ({ ...base, delay: 100 * i })))

  return (
    <Div ref={handleRef}>
      {springs.map((s, i) => {
        return (
          <animated.span key={`char${i}`} style={s}>
            {text[i] === ' ' ? <>&nbsp;</> : text[i]}
          </animated.span>
        )
      })}
    </Div>
  )

CodePen https://codesandbox.io/s/epic-buck-4ubud

...