j-Animation

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

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.

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>