ForgeKomponensek
hu

Komponensek

j-Animation

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez a komponens képes animálni az elemeket a .animation osztályú.


konfiguráció:

  • style {Number} animációs stílus:
    • 1 átláthatóság
    • 2 Nagy méretű és normális (default)
    • 3 Kis méretű a normális
    • 4 forgatás
    • 5 X pozíció megváltoztatása
    • 6 pozíció megváltoztatása
  • delay {Number} késés az animáció között (default: 200)
  • init {Number} kezdeményezés késleltetése (default: 1000)
  • cleaner {Number} késleltetése a tisztító animációs osztályok (első: 1000 megnövekedett szám az elemek)
  • A together {Boolean} minden elemet együtt animálnak (default: false)
  • A visible {Boolean} animációt végez, amikor az elem látható (például false)
  • offset {Number} offset (hullám) a láthatósághoz (default: 50)
  • exec {String} egy link a módszerre, amely az animáció után fut
  • datasource {String} egy adatforráshoz való link (ha az adatforrást módosítják, akkor az animációt újra elvégzik)
  • A if {String} az út feltétele (az ugyanaz a funkció, mint a j-Part), ha az érték ugyanazzal lesz, mint az if értéke, akkor az animációt végre kell hajtani (más esetben minden elem visszaállítja az előző állapotot)

Elemek konfiguráció

Az elem konfigurációja data-animation="delay:100;order:3" attribútumban lehet meghatározni, és opcionális:

  • noanimation {Boolean} eltávolítja az animációt erre az elemre (csak a .animation osztályot távolítja el)
  • delay {Number} animációs késés (default: config.delay)
  • order {Number} animációs rend index, meg kell kezdeni a 1 ... (az elemek ugyanazokat a sorrendeket együtt jelenik meg)
  • style {Number} egy speciális stílus az elemhez

Használja a <ui-component name="animation">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>