ForgeComponente
ro

Componente

j-Animation

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Acest component poate anima elemente cu clasa .animation.


Configurarea:

  • Stilul de animație style {Number}:
    • 1 opacitate
    • 2 Scala de la mare la normal (default)
    • 3 De la mic la normal
    • Rotație 4
    • 5 schimbarea poziției X
    • 6 schimbarea 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: 1000 este 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ție
  • datasource {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 și j-Part), dacă valoarea va fi aceeași cu valoarea if, 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ă cu 1 ... (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ță.

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>