本文介绍了使用React.js的slideUp()和slideDown()动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

我必须使用react动画实现此功能.

I have to implement this feature using react animation.

我阅读了有关 ReactTransitionGroup ReactCSSTransitionGroup 的信息.解释的方式告诉我,我们可以在 DomNode 安装到组件或卸载时(如果我错了,请纠正我)来实现此功能.

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

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

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

有关 https://jsfiddle.net/guc3yrm1/

P.S->请向我解释为什么与jQuery(我是jQuery专家)相比,此反应动画部分似乎有点困难

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

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

推荐答案

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

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

我的结论是对简单任务使用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组.

积分:

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

这篇关于使用React.js的slideUp()和slideDown()动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 17:12
查看更多