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

Question

我创建了一个react组件,它由slideUp()和slideDown()动画组成.我已经实现了使用jQuery slideup和slidedown方法.

我必须使用反应动画来实现此功能.

我读到了ReactTransitionGroup和ReactCSSTransitionGroup.解释的方式告诉我,当DomNode安装到组件或卸载时我们可以执行此功能(如果我错了,请纠正我).

我的问题是 - >如何以反应方式执行slideup()和slidedown()而不使用jQuery.

请参阅此jsFiddle for https://jsfiddle.net/guc3yrm1/

PS - >请解释一下,为什么这个反应动画部分看起来有点难以与jQuery相比(我是一个jQuery人)

var Hello = React.createClass({
    getInitialState: function() {
        return {
            slide: false,
        }
    },
    slide: function() {
        if (this.state.slide) {
            $(this.refs.slide).slideDown();
            this.setState({
                slide: false
            });
        } else {
            $(this.refs.slide).slideUp();
            this.setState({
                slide: true
            });
        }
    },
    render: function() {
        return ( 
            <div>
                <input type = "button" value = "clickme" onClick = {this.slide}/> 
                <br />
                <br />
                <div className = "slide" ref="slide" >< /div>
            </div>
        );
    }
});

ReactDOM.render( < Hello name = "World" / > ,
    document.getElementById('container')
);

Answer 1

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

ReactTransitionGroup是构建ReactCSSTransitionGroup的API.两者之间的主要区别在于ReactTransitionGroup动画是用Javascript而不是CSS编写的,并且提供了一个回调,以便在动画完成时调用,而不是依赖于CSS转换事件.

我的结论是使用CSS动画来完成简单的任务,而Javascript则用于复杂的任务.

例如,如果组件具有静态高度 - 您可以通过CSS实现它,如下面的示例所示.但如果宽度/高度是动态的,那么你可以用Javascript来做.在Javascript示例中,我使用Velocity库来制作动画.它的性能优于jQuery的动画.当然你可以自己实现动画,但为什么要重新发明轮子呢？

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

(CSS)通过ReactCSSTransitionGroup实现:

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 - React向上滑动和向下滑动动画 - CSS Transtion Group.

(Javascript)通过ReactTransitionGroup实现:

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 - React向上滑动和向下滑动动画 - Javascript Transition组.

积分:

• 使用ReactTransitionGroup的动画
• CSS vs. JS动画:哪个更快？

Answer 2

如果您（像我一样）来这里寻找 jQuery 的slideDown/替代品slideUp，那么react-slidedown似乎是一个易于使用的 React组件。它的 github 页面有一个演示和示例代码。