React-transition-group Transition не запускает анимацию при выходе - PullRequest
Новая
       14

React-transition-group Transition не запускает анимацию при выходе

0 голосов
/ 22 марта 2020

Моя цель состоит в том, чтобы значок вращался на 90 градусов (стал плоским), а затем был заменен другим значком, создавая своего рода эффект вращения монет.

Я хочу затем вращаться при вводе и включении выход (задержка вызвана вызовом XHR).

По какой-то причине анимация запускается при входе, но не при выходе.

Это 3 типа сторон, * Состояние 1007 * является взаимоисключающим. 

<div className={c.wrapper}>
  <Transition in={loading} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(loading) && <SyncIcon className={c.loadingIcon} />}
      </div>
    )}
  </Transition>
  <Transition in={success} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(success) && <SuccessIcon className={c.successIcon} />}
      </div>
    )}
  </Transition>
  <Transition in={fail} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(fail) && <FailIcon className={c.failIcon} />}
      </div>
    )}
  </Transition>
</div>

А вот определения стиля: 

const duration = 1000
const allTransitions = {
  appear: duration,
  enter: duration,
  exit: duration
}
const easingFunction = 'ease-in-out'

const defaultStyle = {
  transition: `transform ${duration}ms ${easingFunction}`,
  transform: 'rotateY(90deg)',
  alignSelf: 'center'
}

const transitionStyles = {
  entering: { transform: 'rotateY(0deg)' },
  entered: { transform: 'rotateY(0deg)' },
  exiting: { transform: 'rotateY(90deg)' },
  exited: { transform: 'rotateY(90deg)' },
}

Вот демоверсия: https://codesandbox.io/s/coin-state-indicator-3bnv4

1 Ответ

0 голосов
/ 23 марта 2020

Причина в том, что loading становится false до того, как анимация выхода вступает в силу.

  1. Необходимо удалить условный рендеринг.
  2. Измените CSS, который все переходы «сидят» друг на друге

рабочая песочница: https://codesandbox.io/s/coin-state-indicator-elutx

...