web-dev-qa-db-fra.com

animation slideUp () et slideDown () à l'aide de React.js

J'ai créé un composant react qui consiste en une animation slideUp () et slideDown (). J'ai implémenté des méthodes de glissement et de glissement de jQuery.

Je dois implémenter cette fonctionnalité en utilisant l'animation React.

J'ai lu ReactTransitionGroup et ReactCSSTransitionGroup . La façon d'expliquer m'a appris, nous pouvons faire cette fonctionnalité lorsque DomNode monté sur un composant ou démonté (Corrigez-moi si je me trompe).

Ma question est -> comment faire slideup () et slidedown () de manière réactive et sans utiliser jQuery.

Voir ce jsFiddle pour https://jsfiddle.net/guc3yrm1/

P.S -> Veuillez m'expliquer pourquoi cette partie d'animation réagit semble un peu difficile à comparer à jQuery (je suis un gars 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')
);
javascriptjqueryreactjs
24
Vimal Ramakrishnan

Vous pouvez implémenter les animations dans les deux API des animations. Voici la principale différence:

ReactTransitionGroup est l'API sur laquelle ReactCSSTransitionGroup est construit. La principale différence entre les deux est que les animations ReactTransitionGroup sont écrites en Javascript au lieu de CSS, et un rappel est fourni pour être invoqué lorsque les animations sont terminées au lieu de s'appuyer sur des événements de transition CSS.

Ma conclusion est d'utiliser des animations CSS pour les tâches simples, tandis que Javascript pour les tâches complexes.

Par exemple, si le composant a une hauteur statique - vous pouvez l'implémenter via CSS, comme l'exemple ci-dessous. Mais si la largeur/hauteur est dynamique, vous pouvez le faire avec Javascript. Dans l'exemple Javascript, j'utilise la bibliothèque Velocity pour les animations. Ses performances sont meilleures que les animations de jQuery . Bien sûr, vous pouvez implémenter les animations vous-même, mais pourquoi réinventer la roue?

J'ai implémenté slideUp/slideDown avec les deux API. Découvrez-le ci-dessous.

(CSS) Implémentation via 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 Animation vers le haut et vers le bas - CSS Transtion Group .

(Javascript) Implémentation via 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 Animation Slide up et Slide down - Groupe de transition Javascript .

Crédits:

31
Jordan Enev

Si vous (comme moi) êtes venu ici à la recherche d'une alternative de réaction au slideDown/slideUp de jQuery, alors react-slidedown semble être un composant React facile à utiliser. Sa page github a une démo et un exemple de code .

4
nachtigall

Comme l'a demandé Jordan Enev, j'ai bifurqué son JSFiddle.

Voici une solution qui ne nécessite pas React Css Transition Group. Je suis personnellement un fan des classes-toggles. C'était que vous pouvez créer l'animation css comme bon vous semble.

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

(tout le code au violon)

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

Je sais que c'est sale d'utiliser la variable d'état visible comme ça, mais je suis au travail et je n'ai pas eu trop de temps pour changer trop. Notez que nous utilisons la classe visible pour basculer le conteneur div avec une animation.

En général. Les conteneurs de hauteur dynamique peuvent être animés avec l'utilisation hacky de l'attribut max-height dans css.

2
noa-dev