# j-Animation

> Este componente pode animar elementos com a classe .animação.

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

Este componente pode animar elementos com classe `.animation`.


__Configuração__:

- `style {Number}` estilo de animação:
	- `1` Opacidade
	- `2` de grande para normal (default)
	- `3` de pequena a normal
	- Rotação de `4`
	- `5` Mudança de posição X
	- `6` mudança de posição Y
- `delay {Number}` atraso entre animação (default: `200`)
- Retraso de iniciação `init {Number}` (default: `1000`)
- `cleaner {Number`} atraso para a limpeza de classes de animação (default: `1000` é multiplicado por número de elementos)
- `together {Boolean}` todos os elementos serão animados juntos (default: `false`)
- `visible {Boolean}` realiza animação quando o elemento com animação é visível (default: `false`)
- `offset {Number}` offset (limite) para visibilidade (default: `50`)
- `exec {String}` um link para o método que será executado após a animação
- `datasource {String}` um link para a fonte de dados (se a fonte do dados for modificada, a animação será realizada novamente)
- `if {String}` uma condição para o caminho (a mesma característica como `j-Part`), se o valor for o mesmo que o valor `if`, então a animação será executada (ou seja, todos os elementos serão restaurados para o estado anterior)

### Configuração Elemental

A configuração do elemento pode ser definida no atributo `data-animation="delay:100;order:3"` e é opcional:

- `noanimation {Boolean}` desabilita a animação para este elemento (só remove a classe `.animation`)
- Retraso de animação `delay {Number}` (default: `config.delay`)
- O índice de ordem de animação `order {Number}` deve começar com o `1` ... (elementos com a mesma ordem serão exibidos juntos)
- `style {Number}` um estilo personalizado para o elemento

Use-o com `<ui-component name="animation">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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