j-Animation
Този компонент може да анимира елементи с клас .animation.
Конфигуриране:
style {Number}Стилът на анимацията:1Опасност2Размер от голям до нормален (default)3От малък до нормален4Ротация Z5промяна на позицията X6промяна на позицията Y
delay {Number}Закъснение между анимацията (дефинирано:200)- Закъснение на инициализацията на
init {Number}(предварително:1000) cleaner {Number} закъснение за почистващи анимационни класове (предварително:1000се умножава с броя на елементите)together {Boolean}всички елементи ще бъдат анимирани заедно (предварително:false)visible {Boolean}изпълнява анимация, когато елементът с анимацията е видим (предварително:false)- Оферта за
offset {Number}(предел) за видимост (предварително:50) exec {String}е връзката към метода, която ще бъде изпълнена след анимацияdatasource {String}връзка към източника на данни (ако източникът на данни се променя, анимацията ще бъде извършена отново)if {String}е условие за пътя (същата функция катоj-Part), ако стойността е същата като стойността наif, а анимацията ще бъде изпълнена (в противен случай всички елементи ще бъдат възстановени за предишното състояние)
Конфигурация на елемента
Конфигурацията на елемента може да бъде дефинирана в атрибут data-animation="delay:100;order:3" и е опционална:
noanimation {Boolean}изключва анимацията за този елемент (само премахва клас.animation)delay {Number}Анимация закъснение (дефолт:config.delay)- Индексът на анимацията
order {Number}трябва да започне с1... (елементите със същия ред ще се показват заедно) style {Number}е стандартна форма за елемента
Използвайте го с <ui-component name="animation">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>