css - 在 React 中应用动画

Question

我正在尝试使用 React 创建显示更多和显示更少的效果。但我想应用一些动画。

我有如下 React JS 代码:

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'));

css类如下:

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

正如您在 fiddle 中看到的那样，单击 show less 时的动画很好，就像它应该的那样，但是当我单击 show more 时却不是真好。

知道怎么解决吗？

Answer 1

showMore() 中的overflowY 应该hidden。