react-spring：使用 useChain 进行缩放和翻译答案

【问题标题】：react-spring: using useChain to scale and translatereact-spring：使用 useChain 进行缩放和翻译
【发布时间】：2020-04-06 21:38:29
【问题描述】：

我目前正在使用 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 是之后。从 react-spring 的示例中，最好的方法似乎是将我的第一个 animated.div 包装在另一个 animated.div 中并使用 useChain 链接它们。

我似乎很难理解将我的动画链接在一起的最佳方式。理想情况下，我不必将我目前拥有的东西包装在另一个 animated.div 中。我可以做一些指导。

【问题讨论】：

标签： javascript reactjs react-spring

【解决方案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 })}

【讨论】：