ReactCSSTransitionGroup: transitionAppear не работает - PullRequest
Новая
       22

ReactCSSTransitionGroup: transitionAppear не работает

0 голосов
/ 12 ноября 2018

Я пытаюсь появиться / исчезнуть уведомление, но transitionAppear не работает.Я добавляю элемент (всплывающее уведомление) к событию onBlur.Анимация во время leave работает плавно, а во время appear она внезапно появляется без transition.В Реакте недавно не ругайтесь сильно: D

PS
Если я добавлю ReactCSSTransitionGroup в alert.js - appearработает, но leave - нет.

CodeSandbox: https://codesandbox.io/s/l26j10613q
(на CodeSandbox я использовал ReactCSSTransitionGroup в alert.js, так что appear работает, но leave - нет)

alert.js:

export default class Alert extends Component {
  render() {
    const { icon, text } = this.props;
    let classNames = "cards-wrapper-alert";
    return (
     <div className={classNames}>
       <Card zIndex="2">
         <Icon icon={icon} eClass="alert-message-icon"/>
         <Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
       </Card>
     </div>
    );
  }
}

alert.css:

.alert-appear {
  max-height: 0;
  overflow: hidden;
}

.alert-appear.alert-appear-active {
  max-height: 80px;
  transition: max-height 300ms ease-in-out;
}

.alert-leave {
  max-height: 80px;
}

.alert-leave.alert-leave-active {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-in-out;
}

Что я делаю в input.js:

<ReactCSSTransitionGroup
  component={this.prepareComponentForAnimation}
  transitionName="alert"
  transitionEnter={false}
  transitionAppear={true}
  transitionAppearTimeout={400}
  transitionLeaveTimeout={400}>
    {this.state.alert ?
      <Alert icon={this.state.icon} text={this.state.text}/>
    : null}
</ReactCSSTransitionGroup>

Пример:

enter image description here

1 Ответ

0 голосов
/ 15 ноября 2018

Мне пришлось изменить ваш код , чтобы воспроизвести точный сценарий, который вы показали в своем .gif, переместив ReactCSSTransitionGroup в компонент Input.

После прочтения документов я обнаружил эту строку, которая имеет смысл, почему ваш Alert не анимировался при первом появлении:

ReactCSSTransitionGroup предоставляет опцию prop transitionAppear, чтобы добавить дополнительную фазу перехода при начальном монтировании компонента.

То, что здесь происходит, не является первоначальным монтированием. Состояние alert устанавливается при наличии какого-либо взаимодействия с пользователем на входе.

Итак, простой ответ на ваш вопрос заключается в том, что вам нужно использовать фазу enter, а не фазу appear из-за документов, которые я разместил выше.

...