react-spring：使用 useChain 進行縮放和翻譯

Question

我目前正在使用 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 。 我可以做一些指導。

Answer 1

我設法在不使用 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 })}