ForgeComposants
fr

Composants

j-Animation

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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.

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>