React Spring с задержкой переключения переходов - PullRequest
Новая
       31

React Spring с задержкой переключения переходов

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

Название, возможно, не на месте, но я постараюсь объяснить здесь. Я использовал SwitchTransition в режиме in-out, но так как моя анимация была сделана в основном с использованием ловушки useSpring из пакета react-spring, я бы предпочел полностью перейти с React Transition Group. Но я не совсем уверен, как добиться того же эффекта. Когда происходит переход (для маршрутов), мне нужно, чтобы старый компонент оставался видимым (скажем, в течение 2000 миллисекунд), в то время как новый уже виден. Глядя на крючок useTransition в react-spring, я не вижу способа ввести задержку для leave. 

const transition = useTransition(show, null, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  config: {
    duration: 200, // duration for the whole animation form start to end
  },
})

В SwitchTransition это будет примерно так: 

<SwitchTransition mode='in-out'>
  <CSSTransition
    key={location.pathname}
    timeout={{ enter: 2000, exit: 400 }}
    unmountOnExit
    onEnter={()=>{callback}}
  >
    /* here go routes */
  </CSSTransition>
</SwitchTransition>

Как сделать то же самое в React Spring с useTransition?

1 Ответ

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

Я не знаю какого-либо отдельного времени для входа и выхода, но вы можете сделать что-то подобное с интерполяцией. Например, вы определяете значение x вместо непрозрачности. 

  const transition = useTransition(show, s => (s ? "on" : "off"), {
    from: { x: 0 },
    enter: { x: 1 },
    leave: { x: 2 },
    config: {
      duration: 4000 // duration for the whole animation form start to end
    }
  });

В методе рендеринга вы можете интерполировать непрозрачность из x: 

    {transition.map(({ item, props, key }) => (
      <animated.div
        key={key}
        style={{
          opacity: props.x.interpolate({
            range: [0.0, 1, 1.25, 2],
            output: [0, 1, 0, 0]
          })
        }}
      >
        {item ? "on" : "off"}
      </animated.div>
    ))}

Так что здесь происходит? Продолжительность 4 се c. Когда ввод x переходит от 0 до 1, он интерполируется как непрозрачность также от 0 до 1 для целых 4 se c. При выходе x переходит от 1 к 2. Он сначала интерполирует от 1 до 1.25 как непрозрачность от 1 до 0, затем непрозрачность остается 0 для остальной части анимации. Таким образом, изменение прозрачности анимации с 1 на 0 произойдет примерно через 1 се c.

Что вы думаете об этом?

Вот пример: https://codesandbox.io/s/zen-curran-nnuiu

...