ForgeComponenten
nl

Componenten

j-Animation

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

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-PartAls 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.

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>