ForgeKomponenter
sv

Komponenter

j-Animation

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent kan animera element med .animation-klassen.


Konfigurera:

  • style {Number} stil av animation:
    • 1 Opaticitet
    • 2 skala från stor till normal (default)
    • 3 Skala från liten till normal
    • 4 rotation Z
    • 5 ändring av X-position
    • 6 ändring av Y-position
  • delay {Number} försening mellan animering (default: 200)
  • init {Number} initialiseringsenhet (default: 1000)
  • cleaner {Number} försening för renare av animationsklasser (default: 1000 multipliceras genom att räkna element)
  • together {Boolean} alla element kommer att animeras tillsammans (default: false)
  • visible {Boolean} utför animation när elementet med animationen är synligt (default: false)
  • offset {Number} offset (tröskel) för synlighet (default: 50)
  • exec {String} en länk till metoden som kommer att utföras efter animering
  • datasource {String} en länk till datakälla (om datakällan kommer att ändras så kommer animationen att utföras igen)
  • if {String} är en förutsättning för vägen (samma funktion som j-Part), om värdet kommer att vara samma som värdet if då animationen kommer att utföras (i annat fall kommer alla element återställas för föregående tillstånd)

Elementkonfiguration

Elementkonfiguration kan definieras i data-animation="delay:100;order:3"-attribut och det är valfritt:

  • noanimation {Boolean} inaktiverar animering för detta element (endast avlägsnar .animation klass)
  • delay {Number} animation försening (default: config.delay)
  • order {Number} animation orderindex, måste börja med 1 ... (element med samma order visas tillsammans)
  • style {Number} en anpassad stil för elementet

Använd den med <ui-component name="animation">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>