ForgeКомпоненти
bg

Компоненти

j-Animation

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент може да анимира елементи с клас .animation.


Конфигуриране:

  • style {Number} Стилът на анимацията:
    • 1 Опасност
    • 2 Размер от голям до нормален (default)
    • 3 От малък до нормален
    • 4 Ротация Z
    • 5 промяна на позицията X
    • 6 промяна на позицията 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.

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>