ForgeComponenti
it

Componenti

j-Animation

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questo componente può animare gli elementi con la classe .animation.


Configurazione:

  • Stile di animazione style {Number}:
    • 1 di opacità
    • 2 Scala da grande a normale (default)
    • 3 Scala da piccolo a normale
    • Rotazione di 4
    • 5 cambiamento di posizione X
    • 6 cambiamento 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'animazione
  • datasource {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 come j-Part), se il valore sarà lo stesso del valore if, 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 con 1 ... (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.

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>