Можно ли оживить до 100% в реактивной пружине? - PullRequest
Новая
       30

Можно ли оживить до 100% в реактивной пружине?

0 голосов
/ 17 октября 2018

Я использую реагирующую пружину, чтобы попытаться анимировать содержимое AJAX при его загрузке.

У меня есть контейнерный компонент, который я иногда хочу анимировать в 'auto' с 0, а иногда я хочу анимироватьдо 100% в зависимости от пропуска, который передается.

У меня есть const, который я установил, который затем передается в свойство selectedHeight в компоненте Transition.Затем я использую это для установки свойства высоты в свойстве стиля смонтированного дочернего компонента. 

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

Проблема в том, что это приводит к ошибке превышения максимального callstack, так как я не думаю, что Reaction-Spring может понять '100% 'строковое значение, только' auto '.

Есть ли способ обойти это?

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Спасибо @hpalu за помощь в понимании проблемы:

Проблема в том, что вы переключаете типы, вы переходите от 0 к авто на 0%.Он может интерполировать авто, но это интерполируется как число, вы будете путать его, смешивая это число с процентом.

Чтобы решить эту проблему, я создал константы для обоих моих стартов и конечные точки. 

  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>
0 голосов
/ 18 октября 2018

Проблема в том, что вы переключаете типы, вы переходите от 0 к авто на 0%.Он может интерполировать авто, но это интерполируется как число, вы можете спутать его, смешивая это число с процентом.

PS.Может быть, вы можете немного обмануть, используя css: https://codesandbox.io/embed/xolnko178q

...