ReactCSSTransitionGroup не оживляет высоту

Question

Я пытаюсь создать простую анимацию «скольжения вниз» для некоторого контента, который скрыт / показан на основе состояния поддержки. Содержание динамическое, поэтому высота неизвестна.

Это то, что я пытался. Также смотрите этот код песочницы

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class Some extends React.Component {
  state = {
    showMore: false
  }
  render() {
    const {showMore} = this.state;
    return (
      <div>
        <div>
          <h1>Hej verden</h1>
          <ReactCSSTransitionGroup transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>

          {showMore && 
            <p key={1}>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
          }

          </ReactCSSTransitionGroup>
        </div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({showMore: !this.state.showMore})
  }

}

export default Some

Мои стили:

.App {
  font-family: sans-serif;
  text-align: center;
}

.example-enter {
  height: 0;
}

.example-enter.example-enter-active {
  height: 100%;
  transition: height 500ms ease;
}

.example-leave {
  height: 100%;
}

.example-leave.example-leave-active {
  height: 0;
  transition: height 300ms ease;
}

Я попробовал следующее, но ничего не получилось:

• установка начальной высоты 0

• использовали абсолютные значения px для высоты (хотя это не работает с динамическим контентом)

• используется !important на высоте

• используется max-height вместо height

Как сделать так, чтобы содержимое lorem ipsum "скользило вниз" с высоты: 0 до полной высоты?

Answer 1

Я решил эту проблему, добавив базовый класс с overflow: hidden.

Как показано в следующем примере .

Без overflow: hidden кажется, что переход вообще не происходит.