Question

我正在使用react-spring尝试为AJAX内容加载动画。

我有一个容器组件，有时我希望将其动画设置为从0到“自动”，有时我希望根据传入的道具进行动画设置为100％。

我有一个设置的const，然后将其传递到Transition组件中的namedHeight属性中。然后，我用它在已安装的子组件的style属性中设置height属性。

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％'字符串值，而只能理解'auto'。

有没有解决的办法？

Answer 1

问题是您切换了类型，您从0变为自动到0％。它可以自动插值，但是会以数字形式插值，您需要通过将数字与某个百分比混合来混淆它。

PS。也许您可以使用CSS进行一些欺骗：https://codesandbox.io/embed/xolnko178q

Answer 2

感谢@hpalu帮助我了解问题所在：

问题是您切换了类型，您从0变为自动到0％。它可以自动插值，但是作为一个数字插值，通过将数字与一个百分比混合来混淆它。

为解决此问题，我为起点和创建了consts。

  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>

Answer 3

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

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}%`}
});

是否可以在反应弹簧中将动画设置为100％？

3 个答案: