I decided to study an animation in React and created a simple example of an collapsible panel using CSSTransitionGroup.
To make an animated collapsible, I added max-height: 0, overflow: hidden and a transition for the max-height property, to the panel class.
It works but I'm not sure that this is best way to create collapsible panel.
I will appreciate any advice about code.

const CSSTransitionGroup = React.addons.CSSTransitionGroup;

class App extends React.Component {
  constructor(props) {
    this.state = { visible: false }
  onClick() {
    this.setState((prevState, props) => ({
      visible: !(prevState.visible)
  render() {
    return (
      <div className="App">
        <div className='click' onClick={this.onClick.bind(this)}>Click me</div>
            {this.state.visible ? 
              <div className="content"><p>Hello!</p></div> 
              : null}

  <App />,
.App {
  text-align: center;
  margin: 40px;

  background-color: #f1f1f1;
  overflow: hidden;
  height: 50px;

.example-enter {
  max-height: 0px;

.example-enter.example-enter-active {
  max-height: 50px;
  transition: max-height 300ms ease-in;

.example-leave {
  max-height: 50px;

.example-leave.example-leave-active {
  max-height: 0px;
  transition: max-height 300ms ease-in;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"></div>


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.