j-Animation
Acest component poate anima elemente cu clasa .animation.
Configurarea:
- Stilul de animație
style {Number}:1opacitate2Scala de la mare la normal (default)3De la mic la normal- Rotație
4 5schimbarea poziției X6schimbarea poziției Y
delay {Number}întârziere între animație (default:200)- întârzierea inițializării
init {Number}(default:1000) cleaner {Number} întârziere pentru clasa de animare (default:1000este multiplicat prin numărarea elementelor)together {Boolean}toate elementele vor fi animate împreună (default:false)visible {Boolean}realizează animație atunci când elementul cu animație este vizibil (default:false)offset {Number}offset (limită) pentru vizibilitate (default:50)exec {String}este un link la metoda care va fi executată după animațiedatasource {String}un link la sursa de date (dacă sursa a datelor va fi modificată, animația va fi efectuată din nou)if {String}este o condiție pentru traseu (același caracteristică ca șij-Part), dacă valoarea va fi aceeași cu valoareaif, atunci animația va fi executată (dacă nu toate elementele vor fi restabiliți pentru starea anterioară)
Elementele de configurare
Configurația elementului poate fi definită în atributul data-animation="delay:100;order:3" și este opțională:
noanimation {Boolean}dezactivează animația pentru acest element (numai îndepărtează clasa.animation)- Încălcarea de animație
delay {Number}(default:config.delay) - Indicele de ordine de animație
order {Number}trebuie să înceapă cu1... (elemente cu aceeași comandă vor fi afișate împreună) style {Number}este un stil personalizat pentru elementul
Utilizați-l cu <ui-component name="animation">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.
<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>