j-Animation

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

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.

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>