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

slideUp() and slideDown() animation using React.js

提问by Vimal Ramakrishnan

I have created a react component which consist of slideUp() and slideDown() animation. I have implemented using jQuery slideup and slidedown methods.

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

I have to implement this feature using react animation.

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

I read about ReactTransitionGroupand ReactCSSTransitionGroup. The way of explanation taught me, we can do this functionality when DomNodemounted to a component or unmount(Correct me if I am wrong).

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

My question is --> how to do slideup() and slidedown() in react way and without using jQuery.

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

See this jsFiddle for https://jsfiddle.net/guc3yrm1/

请参阅此 jsFiddle 以获取https://jsfiddle.net/guc3yrm1/

P.S - > Please explain me why this react animation part seems bit a difficult when compare to jQuery(I am a jQuery guy)

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

回答by Jordan Enev

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

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

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.

ReactTransitionGroup 是构建 ReactCSSTransitionGroup 的 API。两者的主要区别在于 ReactTransitionGroup 动画是用 Javascript 而不是 CSS 编写的，并且提供了在动画完成时调用的回调，而不是依赖 CSS 过渡事件。

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

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

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?

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

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

我已经使用这两个 API 实现了 slideUp/slideDown。看看下面。

(CSS) Implementation via ReactCSSTransitionGroup:

(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 Slide up and Slide down animation - CSS Transtion Group.

JSFiddle - 反应向上和向下滑动动画 - CSS 转换组。

---

---

(Javascript) Implementation via ReactTransitionGroup:

(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 Slide up and Slide down animation - Javascript Transition group.

JSFiddle - 反应向上和向下滑动动画 - Javascript 转换组。

---

---

Credits:

学分：

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

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

回答by nachtigall

If you (like me) came here in search for a react alternative to jQuery's slideDown/slideUp, then react-slidedownseems like an easy to use react component. It's github page has a demoand example code.

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

回答by noa-dev

As requested by Jordan Enev i forked his JSFiddle.

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

Here is a solution that doesn't require React Css Transition Group whatsoever. I am personally a fan of class-toggles. That was you can create the css animation however you like it to be.

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

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

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

(whole code in the fiddle)

（小提琴中的整个代码）

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

I know it's dirty to use the visible state variable like that, but I am at work and didn't have too much time to change too much. Note that we are using the visible class to toggle the div container with an animation.

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

Generally speaking. Dynamic height containers can be animated with the hacky usage of max-height attribute in css.

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