Class: AnimationOqt

new AnimationOqt(div_options, delaynullable, effect, children, loopnullable, on_loadopt, on_clickopt, on_leaveopt)

Parameters:

Name	Type	Attributes	Default	Description
div_options	JsonString			Atributos que van a enviarse al div root
delay	string	<nullable>		Tiempo de espera en ms para que se inicialice el componente y la animación
effect	string | EffectList			Uno de los efectos posibles con seteo de tiempo de duración y estilo de linea de tiempo
children	HtmlElement			Body del componente con el contenido que va a animarse
loop	string	<nullable>		Se establece un loop en ms para repetir indefinidamente la animación
on_load	BooleanString	<optional>	"true"	Establece si la animación se va a ejecutar inmediatamente despues de la carga del componente
on_click	BooleanString	<optional>	"false"	Establece si la animación se va a ejecutar cada vez que el usuario haga un click sobre el elemento
on_leave	BooleanString	<optional>	"false"	Establece si la animación se va a ejecutar al descargar el elemento

Source:

• templates/AnimationOqt.js, line 5

Example

Animación pasando una clase al div root
<animation div_options='{"className":"d-flex pb-1"}' effect="slide-right 0.3s linear both">
  <div>
    <h3>Sin notificaciones aún!</h3>
    <h6 class="mt-n2  opacity-80 color-highlight">Pronto las recibirás</h6>
  </div>
  <i class="bi bi-envelope-exclamation-fill font-24 color-yellow-dark"></i>
</animation>
Animación que se retrasa 300ms
<animation effect="slide-bottom 0.2s linear both" delay="300">
  <div class="align-self-center ms-auto">
    <p>Aquí podrás leer las notificaciones generadas por otros usuarios de Appfin en su interacción con vos.</p>
  </div>
</animation>
Animación que no se muestra en el load pero se ejecuta cada 6 segundos
<animation effect="shake-horizontal .4s linear both" on_load="false" loop="6000">
  <div class="{{divConMensajes}}">
    {{CampoMensaje}}
  </div>
</animation>