Material-UI: TextField: response-addons- css -transition-group разрывается с многострочными TextFields

Question

Если TextField с мультилинией обернуто в react-addons-css-transition-group, это прерывает переход показа. Есть ли способ справиться с этим правильно?

Вот мой код: https://codesandbox.io/s/material-demo-v4byd

Если вы удалите тег multiline, переходная работа.

РЕДАКТИРОВАТЬ: я скорректировал мой код для ответа от фракции, но он все еще не работает: https://codesandbox.io/s/material-demo-vpde6

EDIT2: рабочий пример для второй демонстрации: https://codesandbox.io/s/material-demo-1kdyl

Answer 1

Посмотрите на следующий пример, я использовал react-transition-group, потому что do c из react-addons-css-transition-group говорит:

Код в этом пакете переехал. Мы рекомендуем вам использовать CSSTransitionGroup из react-transition-group вместо

Вы можете использовать CSSTransition вместо ReactCSSTransitionGroup для одного элемента или в сочетании с TransitionGroup для списка CSSTransition Компоненты:

import { CSSTransition } from "react-transition-group";

...

<CSSTransition
  in={this.state.show}
  timeout={400}
  classNames="Test"
  unmountOnExit
>
  {this.renderTextField()}
</CSSTransition>

Вы должны удалить if (!this.state.show) { return null; } из renderTextField, поскольку CSSTransition требует дочернего элемента.

test. css (свойство opacity не является обязательным)

.TestWrapper {
  position: relative;
  left: 0px;
}

.Test-enter {
  left: 100px;
  opacity: 0;
}

.Test-enter-active {
  opacity: 1;
  left: 0px;
  transition: left 400ms, opacity 400ms;
}

.Test-exit {
  opacity: 1;
  left: 0px;
}

.Test-exit-active {
  opacity: 0;
  left: 100px;
  transition: left 400ms, opacity 400ms;
}

Рабочий пример :