# j-Animation

> Diese Komponente kann Elemente mit der .animation-Klasse animieren.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 4ec6a859a3ba13661b07e487f8a651ac0ac232a31b33f45fecbd90f69ad36e66
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Diese Komponente kann Elemente mit der Klasse `.animation` animieren.


__Konfiguration__:

- `style {Number}`-Animationsstil:
	- `1` Deckkraft
	- `2`-Skala von groß bis normal (__default__)
	- `3` Skala von klein bis normal
	- `4` Drehung Z
	- `5` Änderung der X-Position
	- `6` Änderung der Y-Position
- `delay {Number}` Verzögerung zwischen Animationen (Standard: `200`)
- `init {Number}` Initialisierungsverzögerung (Standard: `1000`)
- `cleaner {Number`} Verzögerung für sauberere Animationsklassen (Standard: `1000` wird mit der Anzahl der Elemente multipliziert)
- `together {Boolean}` alle Elemente werden gemeinsam animiert (Standard: `false`)
- `visible {Boolean}` führt eine Animation aus, wenn das Element mit der Animation sichtbar ist (Standard: `false`)
- `offset {Number}` Offset (Schwellenwert) für Sichtbarkeit (Standard: `50`)
- `exec {String}` ein Link zur Methode, die nach der Animation ausgeführt wird
- `datasource {String}` ein Link zur Datenquelle (wenn die Datenquelle geändert wird, wird die Animation erneut ausgeführt)
- `if {String}` eine Bedingung für den Pfad (gleiche Funktion wie `j-Part`). Wenn der Wert mit dem `if`-Wert übereinstimmt, wird die Animation ausgeführt (andernfalls werden alle Elemente für den vorherigen Zustand wiederhergestellt).

### Elementkonfiguration

Die Elementkonfiguration kann im Attribut `data-animation="delay:100;order:3"` definiert werden und ist optional:

- `noanimation {Boolean}` deaktiviert die Animation für dieses Element (entfernt nur die Klasse `.animation`)
- `delay {Number}` Animationsverzögerung (Standard: `config.delay`)
- Index der Animationsreihenfolge `order {Number}`, muss mit `1` beginnen ... (Elemente mit derselben Reihenfolge werden zusammen angezeigt)
- `style {Number}` ein benutzerdefinierter Stil für das Element

Verwenden Sie es mit `<ui-component name="animation">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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