j-Animation
Ce composant peut animer des éléments avec la classe .animation.
Configuration :
- Style d'animation
style {Number}:- Opacité
1 - Échelle
2de grand à normal (default) - Échelle
3de petite à normale 4rotation Z5changement de position X6changement de position Y
- Opacité
- 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 :1000est 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'animationdatasource {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é quej-Part), si la valeur est la même que la valeur deifalors 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 par1... (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.
<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>