j-Animation
Questo componente può animare gli elementi con la classe .animation.
Configurazione:
- Stile di animazione
style {Number}:1di opacità2Scala da grande a normale (default)3Scala da piccolo a normale- Rotazione di
4 5cambiamento di posizione X6cambiamento di posizione Y
- Il ritardo di
delay {Number}tra l'animazione (default:200) - Il ritardo di iniziazione
init {Number}(default:1000) cleaner {Number} ritardo per la pulizia delle classi di animazione (default:1000è moltiplicato per il numero di elementi)together {Boolean}tutti gli elementi saranno animati insieme (default:false)visible {Boolean}esegue l'animazione quando l'elemento con l'anima è visibile (default:false)offset {Number}offset (limite) per la visibilità (default:50)exec {String}un collegamento al metodo che verrà eseguito dopo l'animazionedatasource {String}un collegamento alla fonte di dati (se la fonte dei dati sarà modificata, l'animazione verrà eseguita nuovamente)if {String}è una condizione per la strada (la stessa caratteristica comej-Part), se il valore sarà lo stesso del valoreif, allora l'animazione verrà eseguita (altrimenti tutti gli elementi saranno ripristinati per lo stato precedente)
Elementi di configurazione
La configurazione degli elementi può essere definita nell'attributo data-animation="delay:100;order:3" ed è opzionale:
noanimation {Boolean}disabilita l'animazione per questo elemento (solo rimuove la classe.animation)- Il ritardo di animazione
delay {Number}(default:config.delay) - L'indice di ordine di animazione
order {Number}, deve iniziare con1... (elementi con lo stesso ordine saranno visualizzati insieme) style {Number}uno stile personalizzato per l'elemento
Utilizzare con <ui-component name="animation">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.
<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>