j-Animation
Denna komponent kan animera element med .animation-klassen.
Konfigurera:
style {Number}stil av animation:1Opaticitet2skala från stor till normal (default)3Skala från liten till normal4rotation Z5ändring av X-position6ä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:1000multipliceras 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 animeringdatasource {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 somj-Part), om värdet kommer att vara samma som värdetifdå 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.animationklass)delay {Number}animation försening (default:config.delay)order {Number}animation orderindex, måste börja med1... (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.
<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>