# j-Animation

> Tento komponent dokáže animovať prvky s triedou .animation.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 63d431ea124c492000d9f4a1da47fc88f6c9c9b2a7407a332a6a4b70c106ebfd
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Tento komponent dokáže animovať prvky s triedou `.animation`.


__Konfigurácia__:

- Štýl animácie `style {Number}`:
	- Nepriehľadnosť `1`
	- `2` mierka od veľkej po normálnu (__predvolené__)
	- `3` mierka od malého po normálnu
	- `4` otáčanie Z
	- `5` zmena polohy X
	- `6` zmena polohy Y
- `delay {Number}` oneskorenie medzi animáciou (predvolené: `200`)
- Oneskorenie inicializácie `init {Number}` (predvolené: `1000`)
- `cleaner {Number`} oneskorenie pre čistenie tried animácií (predvolené: `1000` sa vynásobí počtom prvkov)
- `together {Boolean}` všetky prvky budú animované spolu (predvolené: `false`)
- `visible {Boolean}` vykoná animáciu, keď je viditeľný prvok s animáciou (predvolené: `false`)
- Posun (prah) `offset {Number}` pre viditeľnosť (predvolené: `50`)
- `exec {String}` odkaz na metódu, ktorá sa vykoná po animácii
- `datasource {String}` odkaz na zdroj údajov (ak sa zdroj údajov upraví, animácia sa vykoná znova)
- `if {String}` podmienka pre cestu (rovnaká vlastnosť ako `j-Part`), ak bude hodnota rovnaká ako hodnota `if`, potom sa vykoná animácia (inak budú všetky prvky obnovené do predchádzajúceho stavu)

### Konfigurácia prvku

Konfigurácia prvku môže byť definovaná v atribúte `data-animation="delay:100;order:3"` a je voliteľná:

- `noanimation {Boolean}` zakáže animáciu pre tento prvok (odstráni iba triedu `.animation`)
- Oneskorenie animácie `delay {Number}` (predvolené: `config.delay`)
- Index poradia animácie `order {Number}`, musí začínať `1` ... (prvky s rovnakým poradím sa zobrazia spolu)
- `style {Number}` vlastný štýl prvku

Použite ho so `<ui-component name="animation">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov 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>
```