¿Cómo mejorar tus animaciones con React Transition Group?

A veces, no le damos la suficiente importancia a las transiciones en nuestras aplicaciones y, sin embargo, mejoran la sensación de un sitio web y la experiencia de usuario.

Las transiciones son una forma de mostrar cambios en algunas propiedades CSS de forma “suave”.

Para esto, CSS es nuestro mejor aliado. Pero, cuando tenemos que controlar la animación de entrada y de salida, necesitamos añadirle un poco de JavaScript. Para solucionar este problema y permitirnos un mayor control de la animación en cada uno de sus estados surge React Transition Group.

React Transition Group no realiza las animaciones, sino que expone los diferentes estados de la animación, haciendo el cambio de clases CSS durante la misma. Además, nos permite controlar la animación incluso cuando el elemento no está en pantalla: indicarle si queremos que la animación se inicie en cuanto aparezca el elemento, animar su salida e, incluso, hacer que el elemento desaparezca del document en cuanto no esté visible, mejorando el uso de la memoria borrando variables que ya no son necesarias.

Componentes

React Transition Group está formado por estos componentes:

• Transition: se encarga de manejar los estados de la transición: (entering, entered, exiting y exited). Gracias a ellos definiremos los estilos en el Javascript.
• CSSTransition: está construido sobre el componente Transition, teniendo todas sus características. Es recomendable usarlo al trabajar con animaciones y transiciones de CSS. Se basa en poner y quitar clases de CSS durante los diferentes estados de la transición y nos permite tener un mayor control sobre los mismos. La diferencia con el anterior es que tenemos que añadir los estilos en el CSS de la aplicación.
• SwitchTransition: se usa cuando se desea examinar el renderizado entre transiciones de estado. Controla dos estados: out-in, en el que espera que el hijo antiguo desaparezca para insertar el nuevo; y el in-out, que inserta el nuevo hijo y luego el antiguo desaparece. Aquí podéis ver un ejemplo muy claro de cuándo utilizarlo.
• TransitionGroup: para manejar un conjunto de transiciones, por ejemplo, en un componente TodoList para animar la creación y el borrado de los elementos.

CSSTransition

Para empezar, solo tenemos que instalarnos React Transition Group con npm o con yarn, utilizando los siguientes comandos en la terminal:

npm install react-transition-group --save
yarn add react-transition-group

Una vez instalada veamos cómo funciona. CSSTransition aplica un par de clases de CSS mientras que el componente aparece, entra en el DOM o sale de este. Lo único que tenemos que hacer es definir esas clases. Nuestras clases pueden tener el nombre que queramos, pero todas se tienen que llamar igual, por ejemplo, “show”, y estar formadas por los siguientes sufijos:

show-enter

show-enter-active

show-exit

show-exit-active

-active: indica cuál es la propiedad que quieres animar, por lo que en estas clases tienen que ir aplicadas las transiciones.

La primera vez que se monta el componente no se aplica la transición, por lo que si queremos que se aplique, tendremos que crear las clases “appear” con sus correspondientes estilos:

fade-appear

fade-appear-active

Veamos un ejemplo. En este caso, va a ser un modal. Vamos a utilizar dos componentes CSSTransition, uno para animar el fondo y otro para animar el contenido, ya que tienen transiciones diferentes.

En nuestro caso, no vamos a necesitar que la animación se haga la primera vez que se monta el componente, ya que al ser un modal se ejecutará cuando hagamos click en el botón. No definiremos estilos para la clase appear, pero sí para la transición:

.show-enter {
  opacity: 0;
  transform: translateY(20%);
}

.show-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.show-exit {
  opacity: 1;
}

.show-exit-active {
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 300ms, transform 300ms;
}

Nuestro componente quedaría de la siguiente forma:

<CSSTransition
        timeout={300}
        in={showModal}
        classNames="show"
        unmountOnExit
        onEntered={() => setShowModal(true)}
        onExit={() => setShowModal(false)}
      >
        <div className="modal">
          <div className="modal-content">
            <h2 className="modal-title">Soy el modal</h2>
            <p className="modal-text">Lorem ipsum
            <div className="button-wrapper">
              <button className="button" onClick={() => setShowModal(false)}>
                Close
              </button>
            </div>
          </div>
        </div>
      </CSSTransition>

Tendríamos que envolver nuestro componente con <CSSTransition></CSSTransition>, admitiendo una serie de propiedades que son:

• timeout: es el tiempo que durará la transición.
• in: cuando esta propiedad esté a true, entonces el modal recibirá la clase -enter.
• classNames: aquí pondremos la clase base donde vamos a definir la animación, pero sin los sufijos correspondientes. Si nos fijamos classNames va en plural.

Vamos a controlar que el modal aparezca y desaparezca con los métodos que tiene CSSTransition:

• onEntered: aplicamos la lógica correspondiente para que el modal aparezca una vez que se haya removido la clase enter.
• onExit: en este caso, vamos a hacer lo mismo pero esta vez nuestro callback se lanzará después de que la clase exit sea aplicada.

Por último, vamos a hacer que el componente desaparezca una vez deje el DOM con unmountOnExit.

¿Qué pasa si no utilizamos el unmountOnExit?

Nuestro componente se muestra siempre en la pantalla. Una vez que pulsamos el botón cerrar desaparece momentáneamente mientras se está ejecutando la animación y cuando acaba se vuelve a mostrar.

Es una forma bastante simple de controlar las animaciones en React, tiene un Api sencilla muy cercana al dominio de CSS, por lo que si controlas mínimamente CSS y transiciones, es bastante fácil hacerte con el Api. Además, como vimos en el ejemplo, el resto sería añadirle propiedades al componente con los valores necesarios. Para efectos sencillos está bastante bien, pero si quieres animaciones más complejas quizás necesitas otro tipo de librerías.

Recursos

• React Transition Group
• Animating React with React Transition Group
• Nifty Modal Window Effects