Is it possible to animate to 100% in react-spring?

Question

I am using react-spring to try and animate in AJAX content as it is loaded.

I have a container component that I sometimes want to animate to 'auto' from 0 and sometimes I want to animate to 100% depending on a prop that is passed in.

I have a const that I set that is then passed into a calculatedHeight property in the Transition component. I then use this to set the height property in the mounted child component's style property.

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>
  )
}

The problem is that this causes a max callstack exceeded error as I don't think react-spring can understand the '100%' string value, only 'auto'.

Is there a work around for this?

Answer 1

The problem is that you switch types, you go from 0 to auto to 0%. It can interpolate auto, but that gets interpolated as a number, you're going to confuse it by mixing that number with a percentage.

PS. Maybe you can trick a little using css: https://codesandbox.io/embed/xolnko178q