1

Estoy trabajando con componentes React y Meteor pero como puedo inscrutar alguna especie de animacion con jquery animate(), he leido algo sobre 'ComponentDidMount(), por decir mis componentes son de esta manera, como puedo referenciar los nodos del DOM para poder ejecutar las animacionones?

este un ejemplo de una navbar pero no como puedo referencias las className para trabajar con jquery?

import React from 'react';
import {Link} from 'react-router'
import { Accounts } from 'meteor/accounts-base';
//import './Landing';
// https://secapaz.com/handwritting/     s è  c a p a z 
 //  <Link to="/registro">crea una cuenta.</Link>

export default class NavbarLanding extends React.Component {
    render() {
        return(
        <div className="navbar-landing">
            <nav>
                <div>
                        <ul className="ul-landing">
                                {/* <img src="./public/images/flat-rocket.jpg"></img> */}
                                <li className="navbar-title"><a>Landing </a></li>
                            <div className="navbar-menu">
                                <li><a>acerca</a></li>
                                <li><a>portafolio</a></li>
                                <li><a>contacto</a></li>
                                <button className="btn"onClick={() => Accounts.logout()}>Logout</button>
                            </div>
                        </ul>
                </div>
             </nav>
        </div>
        );
    };
}
//export default NavbarLanding;
NavbarLanding.reactProptype = {
    title: React.PropTypes.string.isRequired
};

1 respuesta 1

2

es un framework que usa una tecnología conocida como Virtual DOM; esta tecnología no interactúa a cada momento con el DOM original, en su lugar, realiza una serie de cálculos para saber qué partes actualizar y no sobrecargar así el documento con repaints innecearios.

trabaja sobre el DOM real; por lo que usar jQuery con React para cuestiones de animaciones, entre otras es una mala idea. Por otro lado, puedes realizar tu propia animación simplemente con o usando una librería como animate utilizando el estado del componente para correr y/o parar la animación.

Ejemplo

class Animation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animationRunning: true,
    };
  }
  
  componentDidMount() {
    setTimeout(() => {
      this.setState({ animationRunning: false });
    }, 3000);
  }
 
  render() {
    const loaderCss = this.state.animationRunning ? ['loader-wrapper', 'visible'] : ['loader-wrapper'];
    const contentCss = this.state.animationRunning ? ['content'] : ['content', 'visible'];
    return (
      <div className="container">
        <div className={loaderCss.join(' ')}>
          <div className="loader"/>
        </div>
        <div className={contentCss.join(' ')}>
          <h1>Página principal</h1>
        </div>
      </div>
    );
  }
}

const node = document.getElementById('app');
ReactDOM.render(<Animation />, node);
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.loader-wrapper {
  align-items: center;
  background-color: #FDC800;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 1s ease;
  width: 100%;
  z-index: -1;
}
.loader-wrapper.visible {
  opacity: 1;
  z-index: 2;
}
.content {
  opacity: 0;
  transition: all 1s ease;
  z-index: -1;
}
.content.visible {
  opacity: 1;
  z-index: 2;
}

h1 {
  color: #555;
  display: block;
  font-family: 'Ubuntu', 'Segoe UI', sans-serif;
  font-weight: 400;
  margin: 25px auto;
  text-align: center;
}

/* Loader */
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  animation-fill-mode: both;
  animation: spin 1.8s infinite ease-in-out;
}
.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}

@keyframes spin {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
<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>

<div id="app"></div>

3
  • Te agradezco por la informaciòn pero como puedo hcer referencia de por ejemplo de la clase animated en un boton, en la plantilla agreguè la referencia "animate bounceInLeft" pero no funciona la animacion tengo que importar algunaa libreria o agregar alguna otra directiva <button className="btn animated bounceInLeft"onClick={() => Accounts.logout()}>Logout</button> Commented el 8 oct. 2017 a las 0:50
  • @GerardoBautista disculpa la demora. Si quieres hacer un logout animado, es muy similar. Debes de poner las clases de la animación fijas menos animated, esto porque la clase animated la agregarás de acuerdo al estado. Me explico, en el estado pones una bandera que indique cuando mostrar la animación, entonces, cuando presionas logout actualizas la bandera y de esta manera React se encarga de agregar la clase animated para dar inicio a la animación. Puedes complementarlo con un setTimeout para que después de unos segundos redireccione al login por ejemplo.
    – gugadev
    Commented el 8 oct. 2017 a las 16:30
  • 1
    Encontré una pagina con diferentes tipos de animaciones para React, a alguien le puede servir lamentablemente la pagina viene en inglés pero esta muy bien explicado. medium.com/react-native-training/… Commented el 25 oct. 2017 a las 14:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.