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

Question

我创建了一个由 slideUp() 和 slideDown() 动画组成的反应组件。 我已经使用 jQuery slideup 和 slidedown 方法实现了。

我必须使用反应动画来实现这个功能。

我阅读了ReactTransitionGroup和ReactCSSTransitionGroup 。 解释的方式告诉我，我们可以在DomNode挂载到组件或卸载时执行此功能（如果我错了，请纠正我）。

我的问题是 --> 如何在不使用 jQuery 的情况下以反应方式执行 slideup() 和 slidedown()。

请参阅此 jsFiddle 以获取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 - 反应向上和向下滑动动画 - CSS 转换组。

---

(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 - 反应向上和向下滑动动画 - Javascript 转换组。

---

学分：

• 带有 ReactTransitionGroup 的动画
• CSS 与 JS 动画：哪个更快？

Answer 2

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

Answer 3

根据 Jordan Enev 的要求，我分叉了他的 JSFiddle。

这是一个不需要 React Css Transition Group 的解决方案。 我个人是类切换的粉丝。 那就是你可以创建你喜欢的css动画。

https://jsfiddle.net/fyuh32je/3/

（小提琴中的整个代码）

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

    handleClick() {
        this.setState({ visible: this.state.visible == 'panel'? 'panel visible' : 'panel' });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{!this.state.visible == 'panel' ? 'Slide up' : 'Slide down'}</button>
                <div className={this.state.visible}>
                <p>This is some dynamic content!</p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
              </div>
        </div>
    }
}

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

我知道这样使用可见状态变量很脏，但我正在工作，没有太多时间进行太多更改。 请注意，我们使用可见类来切换带有动画的 div 容器。

一般来说。 动态高度容器可以使用 css 中 max-height 属性的hacky 使用动画。