j-Animation

Este componente puede animar elementos con la clase .animation.

Configuración:

• style {Number} estilo de animación:
  • Opacidad 1
  • 2 escala de grande a normal (default)
  • 3 escala de pequeño a normal
  • 4 rotación Z
  • 5 cambio de posición X
  • 6 cambio de posición Y
• delay {Number} retraso entre animaciones (predeterminado: 200)
• Retraso de inicialización init {Number} (predeterminado: 1000)
• cleaner {Number} retraso para el limpiador de clases de animación (predeterminado: 1000 se multiplica por el recuento de elementos)
• together {Boolean} todos los elementos se animarán juntos (predeterminado: false)
• visible {Boolean} realiza animación cuando el elemento con animación es visible (predeterminado: false)
• offset {Number} desplazamiento (umbral) para visibilidad (predeterminado: 50)
• exec {String} un enlace al método que se ejecutará después de la animación
• datasource {String} un enlace a la fuente de datos (si se modifica la fuente de datos, la animación se realizará nuevamente)
• if {String} una condición para la ruta (la misma característica que j-Part), si el valor será el mismo que el valor if entonces se ejecutará la animación (de lo contrario, todos los elementos se restaurarán al estado anterior)

Configuración de elementos

La configuración del elemento se puede definir en el atributo data-animation="delay:100;order:3" y es opcional:

• noanimation {Boolean} deshabilita la animación para este elemento (solo elimina la clase .animation)
• Retraso de animación delay {Number} (predeterminado: config.delay)
• Índice de orden de animación order {Number}, debe comenzar con 1... (los elementos con el mismo orden se mostrarán juntos)
• style {Number} un estilo personalizado para el elemento

Úselo con <ui-component name="animation">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.