# j-Animation

> Denna komponent kan animera element med .animation klass.

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

Denna komponent kan animera element med `.animation`-klassen.


__Konfigurera__:

- `style {Number}` stil av animation:
	- `1` Opaticitet
	- `2` skala från stor till normal (__default__)
	- `3` Skala från liten till normal
	- `4` rotation Z
	- `5` ändring av X-position
	- `6` ändring av Y-position
- `delay {Number}` försening mellan animering (default: `200`)
- `init {Number}` initialiseringsenhet (default: `1000`)
- `cleaner {Number`} försening för renare av animationsklasser (default: `1000` multipliceras genom att räkna element)
- `together {Boolean}` alla element kommer att animeras tillsammans (default: `false`)
- `visible {Boolean}` utför animation när elementet med animationen är synligt (default: `false`)
- `offset {Number}` offset (tröskel) för synlighet (default: `50`)
- `exec {String}` en länk till metoden som kommer att utföras efter animering
- `datasource {String}` en länk till datakälla (om datakällan kommer att ändras så kommer animationen att utföras igen)
- `if {String}` är en förutsättning för vägen (samma funktion som `j-Part`), om värdet kommer att vara samma som värdet `if` då animationen kommer att utföras (i annat fall kommer alla element återställas för föregående tillstånd)

### Elementkonfiguration

Elementkonfiguration kan definieras i `data-animation="delay:100;order:3"`-attribut och det är valfritt:

- `noanimation {Boolean}` inaktiverar animering för detta element (endast avlägsnar `.animation` klass)
- `delay {Number}` animation försening (default: `config.delay`)
- `order {Number}` animation orderindex, måste börja med `1` ... (element med samma order visas tillsammans)
- `style {Number}` en anpassad stil för elementet

Använd den med `<ui-component name="animation">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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