j-Animation

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Ten składnik może animować elementy klasy .animation.

Konfiguracja:

Styl animacji style {Number}:
- 1 nieprawidłowość
- 2 Skala od dużej do normalnej (default)
- 3 Skala od małej do normalnej
- Rotacja 4 Z
- Zmiana poziomu 5
- Zmiana poziomu 6
delay {Number} opóźnienie między animacją (default: 200)
Opóźnienie w inicjalizacji init {Number} (default: 1000)
cleaner {Number} opóźnienie w klasach czystej animacji (default: 1000 jest powiększony przez liczbę elementów)
together {Boolean} wszystkie elementy zostaną animowane razem (default: false)
visible {Boolean} wykonuje animację, gdy element z animacją jest widoczny (default: false)
offset {Number} offset (trzeźba) dla widoczności (default: 50)
exec {String} - link do metody, która zostanie wykonana po animacji
datasource {String} link do źródła danych (jeśli źródło danych zostanie zmienione, animacja zostanie ponownie wykonana)
if {String} jest warunkiem ścieżki (taki sam charakterystyka jak j-Part), jeśli wartość będzie taka sama jak wartość if, animacja zostanie wykonana (w przeciwnym razie wszystkie elementy zostaną przywrócone do poprzedniego stanu)

Konfiguracja elementów

Konfiguracja elementów może być zdefiniowana w atrybutie data-animation="delay:100;order:3" i jest opcjonalna:

noanimation {Boolean} wyłącza animację dla tego elementu (tylko usuwa klasę .animation)
Opóźnienie w animacji delay {Number} (default: config.delay)
Indeks polecenia animacji order {Number} musi rozpocząć się od 1 ... (elementy z tym samym poleceniem będą wyświetlane razem)
style {Number} styl przyzwyczajony do elementu

Użyj go z <ui-component name="animation">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>