# j-Animation

> Ce composant peut animer des éléments avec la classe .animation.

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

Ce composant peut animer des éléments avec la classe `.animation`.


__Configuration__ :

- Style d'animation `style {Number}` :
	- Opacité `1`
	- Échelle `2` de grand à normal (__default__)
	- Échelle `3` de petite à normale
	- `4` rotation Z
	- `5` changement de position X
	- `6` changement de position Y
- Délai `delay {Number}` entre animation (par défaut : `200`)
- Délai d'initialisation `init {Number}` (par défaut : `1000`)
- Délai `cleaner {Number`} pour le nettoyage des classes d'animation (par défaut : `1000` est multiplié par le nombre d'éléments)
- `together {Boolean}` tous les éléments seront animés ensemble (par défaut : `false`)
- `visible {Boolean}` effectue une animation lorsque l'élément avec animation est visible (par défaut : `false`)
- Décalage `offset {Number}` (seuil) pour la visibilité (par défaut : `50`)
- `exec {String}` un lien vers la méthode qui sera exécutée après l'animation
- `datasource {String}` un lien vers la source de données (si la source de données sera modifiée alors l'animation sera à nouveau réalisée)
- `if {String}` une condition pour le chemin (même fonctionnalité que `j-Part`), si la valeur est la même que la valeur de `if` alors l'animation sera exécutée (sinon tous les éléments seront restaurés pour leur état précédent)

### Configuration des éléments

La configuration des éléments peut être définie dans l'attribut `data-animation="delay:100;order:3"` et elle est facultative :

- `noanimation {Boolean}` désactive l'animation pour cet élément (supprime uniquement la classe `.animation`)
- Délai d'animation `delay {Number}` (par défaut : `config.delay`)
- Index d'ordre d'animation `order {Number}`, doit commencer par `1` ... (les éléments de même ordre seront affichés ensemble)
- `style {Number}` un style personnalisé pour l'élément

Utilisez-le avec `<ui-component name="animation">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```