реактивная пружина: использование useChain для масштабирования и перевода - PullRequest
Новая
       11

реактивная пружина: использование useChain для масштабирования и перевода

1 голос
/ 01 апреля 2020

В настоящее время я использую useTransition для отображения моей мобильной навигации: 

const MobileNav = ({show, toggle, styles}) => {
  let transition = useTransition(show, null, {
    from: {transform: 'translateY(-100%) scale(0.7)', ...styles},
    enter: {transform: 'translateY(0) scale(1)'},
    leave: {transform: 'translateY(100%) scale(0.7)'}
  })

  return (
    <>
      {transition.map(({item, props, key}) => {
        return item ? (
          <animated.div className="navbar__menu_mob" key={key} style={props}>
            ...someHtml
          </animated.div>
        ) : null
      })}
    </>
  )
}

С этим кодом анимируются масштаб и перевод одновременно. Моя конечная цель состоит в том, чтобы связать их так, чтобы сначала scale, а потом translateY Исходя из примеров реагирующей пружины, кажется, что лучший способ обернуть мои первые animated.div в другие animated.div и связать их в цепочку, используя useChain.

Я, кажется, изо всех сил пытаюсь понять лучший способ соедините мои анимации вместе. В идеале мне не нужно было бы оборачивать то, что у меня есть, в другую animated.div. Я мог бы сделать с некоторым руководством.

1 Ответ

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

Мне удалось выяснить это без использования useChain ().

Я использовал многоступенчатые переходы: 

let transition = useTransition(show, null, {
    from: {translate: '-100%', scale: 0.7, ...styles},
    enter: item => async(next) => {
      await next({translate: '0%'})
      await next({scale: 1})
    },
    leave: item => async(next) => {
      await next({scale: 0.7})
      await next({translate: '100%'})
    }
  })

Затем мне пришлось интерполировать стили следующим образом: 

{transition.map(({item, props, key}) => {
        return item ? (
          <animated.div className="navbar__menu_mob" key={key} style={{
            transform: interpolate([
              props.translate.interpolate(v => `translateY(${v})`),
              props.scale.interpolate(v => `scale(${v})`)
            ], (translate, scale) => `${translate} ${scale}`),
            ...props
            }}></animated.div> )
        : null })}
...