j-Animation
Deze component kan elementen animeren met de .animation-klasse.
Configuratie:
style {Number}stijl van animatie:1opaciteit2Van groot tot normaal (default)3Van klein tot normaal4rotatie Z5verandering van X-positie6wijziging van Y-positie
delay {Number}vertraging tussen animatie (default:200)init {Number}initialisering vertraging (default:1000)cleaner {Number} vertraging voor de reiniger van animatieklassen (de standaard:1000wordt vermenigvuldigd door het aantal elementen)together {Boolean}alle elementen worden geanimeerd samen (default:false)visible {Boolean}uitvoert animatie wanneer het element met animatie zichtbaar is (default:false)offset {Number}offset (grens) voor zichtbaarheid (default:50)exec {String}een link naar de methode die na de animatie zal worden uitgevoerddatasource {String}een link naar gegevensbron (als de gegevensbron wordt gewijzigd dan zal de animatie opnieuw worden uitgevoerd)if {String}een voorwaarde voor de weg (zoalsj-PartAls de waarde hetzelfde is alsifwaarde dan de animatie zal worden uitgevoerd (anders zullen alle elementen worden hersteld voor de vorige staat)
Elementsconfiguratie
De configuratie van de elementen kan worden gedefinieerd in data-animation="delay:100;order:3" attribute en het is optioneel:
noanimation {Boolean}schakelt animatie voor dit element uit (alleen verwijdert de.animationklasse)delay {Number}animatie vertraging (default:config.delay)order {Number}animatiebevelindex, moet beginnen met1... (elementen met dezelfde order zullen samen worden weergegeven)style {Number}een standaard stijl voor het element
Gebruik het met <ui-component name="animation">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.
<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>