2
\$\begingroup\$

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) {
    super(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>
        <div>
          <CSSTransitionGroup
            transitionName='example'
            transitionEnterTimeout={300}
            transitionLeaveTimeout={300}>
            {this.state.visible ? 
              <div className="content"><p>Hello!</p></div> 
              : null}
          </CSSTransitionGroup>
        </div>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
)
.App {
  text-align: center;
  margin: 40px;
}

.content{
  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>

\$\endgroup\$

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.