# j-Animation

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: bg
Content-SHA256: 5c8cd8265a09b4bb53c9c6978069fdf794dad7a2efba71783f04aad9b5b28181
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Този компонент може да анимира елементи с клас `.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.

```html 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>
```