2

我正在使用 react-spring 尝试在加载 AJAX 内容时对其进行动画处理。

我有一个容器组件，有时我想从 0 动画到“自动”，有时我想根据传入的道具动画到 100%。

我设置了一个 const，然后将其传递到 Transition 组件中的 computedHeight 属性。然后我使用它在已安装的子组件的样式属性中设置高度属性。

const Container = ({ data, children, stretchHeight }) => {
  const loaded = data.loadStatus === 'LOADED';
  const loading = data.loadStatus === 'LOADING';

  const animationHeight = stretchHeight ? '100%' : 'auto';

  return (
    <div
      className={classnames({
        'data-container': true,
        'is-loading': loading,
        'is-loaded': loaded,
        'stretch-height': stretchHeight
      })}
      aria-live="polite"
    >
      {loading &&
        <div style={styles} className='data-container__spinner-wrapper'>
          <LoadingSpinner />
        </div>
      }

      <Transition
        from={{ opacity: 0, calculatedHeight: 0 }}
        enter={{ opacity: 1, calculatedHeight: animationHeight }}
        leave={{ opacity: 0, calculatedHeight: 0 }}
        config={config.slow}
      >
        {loaded && (styles => {
          return (
            <div style={{ opacity: styles.opacity, height: styles.calculatedHeight }}>
              {children}
            </div>
          )
        }
        )}
      </Transition>
    </div>
  )
}

问题是这会导致最大调用堆栈超出错误，因为我认为 react-spring 不能理解“100%”字符串值，只能理解“自动”。

有解决办法吗？

4

3 回答 3

3

问题是你切换类型，你从 0 到 auto 再到 0%。它可以内插自动，但它被内插为一个数字，你会通过将该数字与百分比混合来混淆它。

PS。也许您可以使用 css 进行一些技巧：https ://codesandbox.io/embed/xolnko178q

于 2018-10-18T17:30:52.593 回答
0

感谢@hpalu 帮助我意识到问题所在：

问题是你切换类型，你从 0 到 auto 再到 0%。它可以内插自动，但它被内插为一个数字，你会通过将该数字与百分比混合来混淆它。

为了解决这个问题，我为起点和终点创建了 const。

  const containerHeightAnimationStart = stretchHeight ? '0%' : 0;
  const containerHeightAnimationEnd = stretchHeight ? '100%' : 'auto';

然后我在动画中使用了这些：

<Transition
  native
  from={{ opacity: 0, height: containerHeightAnimationStart }}
  enter={{ opacity: 1, height: containerHeightAnimationEnd }}
  leave={{ opacity: 0, height: containerHeightAnimationStart }}
>
  {loaded && (styles => {
    return (
      <animated.div style={styles}>
        {children}
      </animated.div>
    )
  }
  )}
</Transition>
于 2018-10-19T08:23:47.933 回答
0

从 & 到需要相同的单位（数字或字符串）

const [percentage, setPercentage] = useState(100);

// wrong
const animationState2 = useSpring({
    from:{width: 0},
    to: {width: `${percentage}%`}
});

// right
const animationState2 = useSpring({
    from:{width: '0%'},
    to: {width: `${percentage}%`}
});
于 2020-05-11T09:56:22.860 回答