Apply animations in React

Question

I'm trying to create show more and show less effect with React. But I want to apply some animation.

I have React JS code as follows:

const FEATURES = ["Light alloy wheels in general", 
        "Leather upholstery", 
        "Xenon-light", 
        "mp3 Player", 
        "Navigation system", 
        "Roof: other", 
        "Power steering", 
        "Automatic climate control", 
        "Cruise control", 
        "Bluetooth interface", 
        "Park Distance Control rear", 
        "Heated seat driver"];
const MAX_HEIGHT = 150;

class Test extends React.Component {
        constructor(props){
        super(props);

      this.state = {
        moreSpecsButton: false,
        lessSpecsButton: false,
        specsBoxStyles: {}
      }
    }

    componentDidMount(){
        let height = document.getElementById("child-ref").clientHeight;
        if(height > MAX_HEIGHT){
            this.setState({moreSpecsButton: true, specsBoxStyles: {height: MAX_HEIGHT, overflowY: "hidden"}})
        }else{
            this.setState({specsBoxStyles: {height: height, overflowY: "visible"}})
        }
    }

    showMore(){
        let height = document.getElementById("view-ref").clientHeight;
        this.setState({moreSpecsButton: false, specsBoxStyles: {height: height, overflowY: "visible"}, lessSpecsButton: true})
    };

    showLess(){
        this.setState({moreSpecsButton: true, specsBoxStyles: {height: MAX_HEIGHT, overflowY: "hidden"}, lessSpecsButton: false})
    };

    renderMoreLessButton(){
        if(this.state.moreSpecsButton && !this.state.lessSpecsButton){
            return <div className="moreLessButton clearfix" onClick={this.showMore.bind(this)}>Show more</div>;
        }

        if(this.state.lessSpecsButton && !this.state.moreSpecsButton){
            return <div className="moreLessButton clearfix" onClick={this.showLess.bind(this)}>Show less</div>;
        }

    }

    render(){
        return (
        <div>
            <div className="wrapper-box clearfix">
                <div id="child-ref" className="child-box clearfix" ref="child-ref" style={{...this.state.specsBoxStyles}}>
                        <div id="view-ref">
                    {FEATURES.map(feature => <div>{feature}</div>)}
                </div>
                </div>
            </div>
            {this.renderMoreLessButton()}
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

And the css class as follows:

.child-box{
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

Here is the fiddle.

As you can see in the fiddle the animation when show less is clicked is nice, like it should be, but when I click on show more the it is not so nice.

Any idea how to solve it?

Answer 1

overflowY in showMore() should be hidden.