Продолжительность CSSTransition не работает - PullRequest
Новая
       41

Продолжительность CSSTransition не работает

0 голосов
/ 15 мая 2018

Я пытаюсь реализовать анимацию скольжения вниз с помощью CSSTransition , но кажется, что duration из transition не работает.

codepen

component.jsx 

let { CSSTransition, TransitionGroup } = ReactTransitionGroup

class Example extends React.Component {

    state = {
    show: false,
  };

    render() {
        return (
          <div>
            <button onClick={() => this.setState({
          show: true })}>Show</button>
          {this.state.show && (
            <CSSTransition in={this.state.show} timeout={2000} classNames="birthday-input" appear>
              <div className="form-group birthday-input">
                <h1>HEADER</h1>
              </div>
            </CSSTransition> 
          )}
            </div>
        );
    }
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

component.scss 

.birthday-input-enter {
  max-height: 0;
}
.birthday-input-enter-active {
  -webkit-transition: max-height 1s ease;
  max-height: 1000px;
}
.birthday-input-exit {
  max-height: 1000px;
}
.birthday-input-exit-active {
  max-height: 0;
  -webkit-transition: max-height 1s ease;
}

1 Ответ

0 голосов
/ 15 мая 2018

Из документации библиотеки: Когда значение in установлено в true, Компонент получит класс CSS example-enter и класс CSS example-enter-active, добавленные в следующем тике. Это соглашение основано на classNames проп.

Во-первых, в вашем случае in никогда не оценивается как true, потому что showBirthInput равно undefined.

Во-вторых, это должно что-то делать с оценкой JS, потому что, если я беру оценку JS и вместо этого прошу CSSTransition отрендерить на show, она отлично работает.

Вот рабочий пример, основанный на вашем коде: https://stackblitz.com/edit/react-pshw1h?file=index.js

...