# j-Animation

> Deze component kan elementen animeren met .animatieklasse.

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

Deze component kan elementen animeren met de `.animation`-klasse.


__Configuratie__:

- `style {Number}` stijl van animatie:
	- `1` opaciteit
	- `2` Van groot tot normaal (default)
	- `3` Van klein tot normaal
	- `4` rotatie Z
	- `5` verandering van X-positie
	- `6` wijziging van Y-positie
- `delay {Number}` vertraging tussen animatie (default: `200`)
- `init {Number}` initialisering vertraging (default: `1000`)
- `cleaner {Number`} vertraging voor de reiniger van animatieklassen (de standaard: `1000` wordt vermenigvuldigd door het aantal elementen)
- `together {Boolean}` alle elementen worden geanimeerd samen (default: `false`)
- `visible {Boolean}` uitvoert animatie wanneer het element met animatie zichtbaar is (default: `false`)
- `offset {Number}` offset (grens) voor zichtbaarheid (default: `50`)
- `exec {String}` een link naar de methode die na de animatie zal worden uitgevoerd
- `datasource {String}` een link naar gegevensbron (als de gegevensbron wordt gewijzigd dan zal de animatie opnieuw worden uitgevoerd)
- `if {String}` een voorwaarde voor de weg (zoals `j-Part`Als de waarde hetzelfde is als `if` waarde dan de animatie zal worden uitgevoerd (anders zullen alle elementen worden hersteld voor de vorige staat)

### Elementsconfiguratie

De configuratie van de elementen kan worden gedefinieerd in `data-animation="delay:100;order:3"` attribute en het is optioneel:

- `noanimation {Boolean}` schakelt animatie voor dit element uit (alleen verwijdert de `.animation` klasse)
- `delay {Number}` animatie vertraging (default: `config.delay`)
- `order {Number}` animatiebevelindex, moet beginnen met `1` ... (elementen met dezelfde order zullen samen worden weergegeven)
- `style {Number}` een standaard stijl voor het element

Gebruik het met `<ui-component name="animation">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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