Utilizing ReactJS to implement a collapsible/expandable list with animation has been my latest endeavor. To access the code, simply visit this link. Upon clicking the Extend button located at the top of the list, I anticipate the items to appear within 1 second while simultaneously shifting the footer to the bottom. Regrettably, my current code fails to deliver the desired outcome. Firstly, the list items are not displayed with the intended animation style - appearing as though they are all rendered simultaneously. Secondly, upon clicking the extend button, the footer promptly moves to the bottom. Any suggestions on how I can correctly implement the list with ReactJS animation?
Below is the ReactJS code snippet that I am currently using:
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const Container = React.createClass({
getInitialState() {
return {
items: ['Click', 'To', 'Remove', 'An', 'Item'],
extend: false
};
},
render() {
return (
<div className="container">
<div className="animation-container">
<div onClick={() => this.expendItems()} className="item">
{this.state.extend?'Collapse':'Extend'}
</div>
<ReactCSSTransitionGroup transitionName="example">
{this.renderItems()}
</ReactCSSTransitionGroup>
<div>Footer</div>
</div>
</div>
);
},
renderItems() {
const items = this.state.extend? this.state.items : [];
console.log('render items ', items);
return items.map((item, i) => {
return (
<div key={item} className="item">
{item}
</div>
);
});
},
expendItems() {
this.setState({extend: !this.state.extend});
}
});
ReactDOM.render(<Container/>, document.body);