React-Transition-Group добавляет задержку перед добавлением класса * -enter - PullRequest
Новая
       19

React-Transition-Group добавляет задержку перед добавлением класса * -enter

0 голосов
/ 10 октября 2019

Я пытаюсь использовать response-transition-group для анимации входа / выхода двух компонентов. Переходы работают нормально, но единственная проблема заключается в том, что, когда * -exit запускается для выходящего компонента, другой компонент также входит в DOM, и выходящий компонент опускается перед выходом. Вы можете видеть это в кодах и окне ниже. Как я могу иметь задержку, чтобы * -enter срабатывал только после завершения * -exit? Любая помощь приветствуется.

Код - https://codesandbox.io/s/csstransition-component-06bpo

1 Ответ

3 голосов
/ 10 октября 2019

Я сделал что-то похожее с реактивной пружиной. Моим решением было использовать абсолютное позиционирование. Таким образом, два компонента находятся друг на друге, и анимация входа и выхода происходит одновременно. Я добавил стиль в Child.js 

const style = { position: 'absolute', width: '100%' };

return (
  <div style={style}>
    {props.type.list ? (...

И я также изменил анимацию ввода слева направо, кажется, мне кажется, лучше. 

.alert-enter {
  transform: translateX(-100%);
}

Вот пример: https://codesandbox.io/s/csstransition-component-xuw2t

...