使用React.js的slideUp()和slideDown()动画

您可以在两个动画的API中实现这些动画.主要区别如下:

You can implement the animations in the both animations' APIs. Here is the main difference:

ReactTransitionGroup是ReactCSSTransitionGroup所基于的API 内置的.两者之间的主要区别是 ReactTransitionGroup动画是用Javascript而不是Javascript编写的 CSS，并提供了在动画制作时调用的回调 完成而不是依赖CSS过渡事件.

ReactTransitionGroup is the API upon which ReactCSSTransitionGroup is built. The main difference between the two is that ReactTransitionGroup animations are written in Javascript instead of CSS, and a callback is provided to be invoked when animations are complete instead of relying on CSS transition events.

我的结论是对简单任务使用CSS动画，对复杂任务使用Javascript.

My conclusion is use CSS animations for the simple tasks, while Javascript for the complex ones.

例如，如果组件具有静态高度-您可以通过CSS来实现，如下例所示.但是，如果宽度/高度是动态的，则可以使用Javascript实现.在Javascript示例中，我将Velocity库用于动画. 它的性能优于jQuery的动画.当然，您可以自己实现动画，但是为什么要重新发明*呢?

For example if the component has static height - you can implement it via CSS, as the example shows below. But if the width/height are dynamic, then you can do it with Javascript. In the Javascript example I'm using Velocity library for the animations. It's performance better than jQuery's animations. Of course you can implement the animations by yourself, but why to reinvent the wheel?

我已经使用两个API实现了slideUp/slideDown.在下面查看.

I've implemented slideUp/slideDown with the both APIs. Check it out below.

const CSSTransitionGroup = React.addons.CSSTransitionGroup;
const TransitionGroup = React.addons.TransitionGroup;

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
    	this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <CSSTransitionGroup transitionName="example">
            	{ this.state.visible ? <div className='panel' /> : null }
            </CSSTransitionGroup>
        </div>
    }
}

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

.panel {
    width: 200px;
    height: 100px;
    background: green;
    margin-top: 10px;
}

.example-enter {
    height: 0px;
}

.example-enter.example-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.example-leave.example-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle-反应上下滑动动画-CSS转换组.

const TransitionGroup = React.addons.TransitionGroup;

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
                <TransitionGroup>
                    { this.state.visible ? <Accordion /> : null }
                </TransitionGroup>
            </div>
        }
    }

    class Accordion extends React.Component {
        componentWillEnter (callback) {
            const element = this.container.getDOMNode();
            Velocity(element, 'slideDown', { duration: 300 }).then(callback);
        }

        componentWillLeave (callback) {
            const element = this.container.getDOMNode();
            Velocity(element, 'slideUp', { duration: 300 }).then(callback);
        }

        setContainer(c) {
            this.container = c;
        }

        render() {
            return <div className="panel" ref={this.setContainer.bind(this)}>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
        }
    }

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

.panel {
    background: green;
    margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle-反应上下滑动动画-Javascript Transition组.

积分:

• 带有ReactTransitionGroup的动画
• CSS与JS动画:哪个更快?

• Animations with ReactTransitionGroup
• CSS vs. JS Animation: Which is Faster?