# j-Animation

> Tato složka může animovat prvky s třídou .animation.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: cs
Content-SHA256: 4a904fda72c2629b2f4338b895480cad7d1088f1771477f0aa8e6a823d5275ac
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Tato složka může animovat prvky s třídou `.animation`.


__Konfigurace__:

- `style {Number}` styl animace:
	- `1` opacita
	- `2` Rozsah od velké do normální (default)
	- `3` Rozsah od malého do normálního
	- `4` rotace Z
	- `5` změna pozice X
	- `6` změna polohy Y
- `delay {Number}` zpoždění mezi animací (předvolené: `200`)
- Zpoždění zahájení `init {Number}` (předvolené: `1000`)
- `cleaner {Number`} zpoždění pro čistící třídy animace (předběžné: `1000` je rozmnožen počtem prvků)
- `together {Boolean}` všechny prvky budou animovány společně (předvolené: `false`)
- `visible {Boolean}` provádí animaci, když je prvek s animací viditelný (podmínkou: `false`)
- `offset {Number}` offset (trh) pro viditelnost (předvolený: `50`)
- `exec {String}` odkaz na metodu, která bude prováděna po animaci
- `datasource {String}` odkaz na zdroj údajů (pokud bude zdroj údajů změněn, animace se provede znovu)
- `if {String}` je podmínkou pro cestu (podobná funkce jako `j-Part`), pokud bude hodnota stejná jako hodnota `if`, pak se animace provede (jinak budou všechny prvky obnoveny pro předchozí stav)

### Konfigurace prvků

Konfigurace prvků může být definována v atributu `data-animation="delay:100;order:3"` a je volitelná:

- `noanimation {Boolean}` deaktivuje animace pro tento prvek (pouze odstraňuje třídu `.animation`)
- `delay {Number}` animace zpoždění (předvolené: `config.delay`)
- Indikátor rozkazů `order {Number}`, musí začít s `1` ... (elementy se stejným rozkazem budou zobrazeny společně)
- `style {Number}` je stylový pro prvek

Použijte ji s `<ui-component name="animation">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

```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>
```