Animación modular

Cuando se usa un framework como Knockout, es importante abstraer las animaciones de estilos & pensar en ellas como clases modulares. Por ejemplo, es posible que desee aplicar una animación a un conjunto de tres titulares con las clases Titular M . Pero es probable que no prefiera que esa animación se reproduzca en todas las instancias de Titular M en todo el sitio. En tal caso, es útil crear una nueva clase como Anim - Titulares de cartas & aplicar la animación a la clase. Esto se hace mejor en un elemento ficticio, donde puede apuntar a la clase simple en sí.

Cuando la animación se aplica a la clase, podemos añadirla a cualquier elemento para conseguir la animación independientemente de cualquier clase atómica asignada al elemento.

Por lo general, una clase de animación no incluirá ninguna declaración de estilo, excepto las declaraciones que sean exclusivas de la animación. Por ejemplo, si la animación incluye una rotación de transformación, la clase podría incluir una declaración de configuración de transformación que defina el punto de origen de la rotación.

Este enfoque también resulta útil para crear interdependencia entre varios elementos. Por ejemplo, en el caso de una serie de cajas de preguntas frecuentes para ocultar/mostrar, es posible que queramos cerrar todos los cuadros abiertos antes de abrir la caja en la que se hizo clic. Podemos hacerlo usando dos clases diferentes, Anim - FAQ Open & Anim - FAQ . De esta forma, cerramos todos los elementos con la clase Anim - FAW Close antes de abrir el Anim - FAQ que es un child o sibling del destino del clic. Dado que Webflow solo permite una sola declaración de relación de destino por clase dentro de una animación, el uso de varias clases es la única forma de lograr este tipo de animación compleja.

A continuación:

Grids Avanzadas