Переключение с задержкой React Spring

Название может быть не на месте, но я постараюсь объяснить здесь. Я использовал 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?


reactjs react-spring
person Katherine    schedule 26.04.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я не знаю отдельного тайминга для входа и выхода, но вы можете сделать что-то подобное с интерполяцией. Например, вы определяете значение 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 сек. Когда ввод x идет от 0 до 1, он интерполируется как непрозрачность также от 0 до 1 на все 4 секунды. При оставлении x изменяется от 1 до 2. Сначала он интерполирует от 1 до 1,25 как непрозрачность от 1 до 0, затем непрозрачность остается 0 для остальной части анимации. Таким образом, изменение непрозрачности анимации с 1 на 0 произойдет примерно за 1 секунду.

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

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

person Peter Ambruzs    schedule 27.04.2020

arrow_upward
0
arrow_downward

Метод 1: самый простой - использовать свойство trail

const transition = useTransition(show, null, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  trail:150
})

Метод 2: для добавления разной задержки к каждому элементу с помощью дополнительного массива задержек

Вот рабочая демонстрация для обоих методов: https://codesandbox.io/embed/udget-satoshi-yi4uw?fontsize=14&hidenavigation=1&theme=dark.

Надеюсь, это кому-то поможет

person Firoj Siddiki    schedule 21.05.2021

arrow_upward
0
arrow_downward

Думаю, я вообще не понимаю, но вы можете добавить опору задержки и добавить функцию вместо объекта вроде этого:

 let location = useLocation();
  const transition = useTransition(location, {
      from: { opacity: 0 },
      enter: item => async (next, cancel) => {
          await next({ opacity: 1, y: 0, })
          await next({ opacity: 1, y: 70, })
        },
      leave: { opacity: 0, delay:400 },
    })

и измените подходящую вам последовательность. я полностью уверен, что вы можете найти здесь другую информацию: https://react-spring.io/hooks/use-transition

transition(
  (props, item) => {
    return (
      <a.div className='main' style={props} >
        <Switch location={item} >
          <Route path='/hours' component={HoursPage} />
          <Route path='/city' component={CityPage} />
          <Route path='/' component={InicioPage} />
        </Switch>
      </a.div>
    )
  }
)
person Fil. V.    schedule 12.07.2021