javascript - portals - Animación slideUp() y slideDown() usando React.js

react js optimization

Question

He creado un componente de reacción que consiste en la animación slideUp () y slideDown (). He implementado el uso de jQuery slideup y slidedown.

Tengo que implementar esta característica usando la animación de reacción.

Leí sobre ReactTransitionGroup y ReactCSSTransitionGroup . La forma de explicación que me enseñó es que podemos hacer esta funcionalidad cuando DomNode se monta en un componente o se desmonta ( corríjame si me equivoco).

Mi pregunta es -> cómo hacer slideup () y slidedown () de manera reactiva y sin usar jQuery.

Vea este archivo jsFiddle para https://jsfiddle.net/guc3yrm1/

PS -> Por favor, explícame por qué esta parte de la animación de reacción parece un poco difícil cuando se compara con jQuery (soy un chico de 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

Puedes implementar las animaciones en las dos API de ambas animaciones. Aquí está la principal diferencia:

ReactTransitionGroup es la API sobre la cual se construye ReactCSSTransitionGroup. La principal diferencia entre los dos es que las animaciones de ReactTransitionGroup están escritas en Javascript en lugar de CSS, y se proporciona una devolución de llamada para invocarlas cuando las animaciones están completas en lugar de depender de los eventos de transición de CSS.

Mi conclusión es usar animaciones CSS para las tareas simples, mientras que Javascript para las complejas.

Por ejemplo, si el componente tiene una altura estática, puede implementarlo a través de CSS, como se muestra en el ejemplo a continuación. Pero si el ancho / alto es dinámico, entonces puedes hacerlo con Javascript. En el ejemplo de Javascript estoy usando la biblioteca de Velocity para las animaciones. Es el rendimiento mejor que las animaciones de jQuery . Por supuesto, puedes implementar las animaciones por ti mismo, pero ¿por qué reinventar la rueda?

He implementado slideUp / slideDown con las dos API. Échale un vistazo a continuación.

Implementación (CSS) a través de 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 - Reaccionar deslizar hacia arriba y deslizar hacia abajo la animación - CSS Transtion Group .

Implementación (Javascript) a través de 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 - Reaccionar deslizar hacia arriba y deslizar hacia abajo la animación - Javascript grupo de transición .

Créditos:

• Animaciones con ReactTransitionGroup
• CSS vs. JS Animation: ¿Cuál es más rápido?

Answer 2

Según lo solicitado por Jordan Enev, yo bifurqué su JSFiddle.

Aquí hay una solución que no requiere React Css Transition Group. Personalmente, soy un fan de la alternancia de clase. Eso es lo que puedes crear la animación css como quieras.

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

(código completo en el violín)

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

Sé que es sucio usar la variable de estado visible de esa manera, pero estoy en el trabajo y no tuve mucho tiempo para cambiar demasiado. Tenga en cuenta que estamos utilizando la clase visible para alternar el contenedor div con una animación.

Generalmente hablando. Los contenedores de altura dinámica se pueden animar con el uso hacky del atributo max-height en css.

Answer 3

Si usted (como yo) vino aquí en busca de una alternativa de reacción al slideDown / slideUp , entonces react-slidedown parece ser un componente de reacción fácil de usar. Su página github tiene un código de ejemplo y demo .