# j-Animation

> Este componente puede animar elementos con la clase .animation.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 522c49479e78e12998529e021bf79f268e0dcb3a6bdf8f5f2fa47dfce29b91f3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

```html example.html
<ui-plugin path="form" class="container">
	<ui-component name="animation" config="style:6">
		<div class="row">
			<div class="col-md-3 m">
				<ui-component name="input" path="?.name" class="animation">Name</ui-component>
			</div>
			<div class="col-md-3 m">
				<ui-component name="input" path="?.price" config="type:number" class="animation">Price</ui-component>
			</div>
			<div class="col-md-3 m">
				<ui-component name="input" path="?.address" class="animation" data-animation="noanimation:1">Without animation</ui-component>
			</div>
		</div>
	</ui-component>
</ui-plugin>
```