@ANGULAR ANIMATIONS
@ANGULAR ANIMATIONS
¿Qué es @angular/animations?
Imagina que quieres que tu aplicación web sea más dinámica y atractiva, que tenga elementos que se muevan, cambien de tamaño o de color de forma suave y gradual. Para lograr esto, Angular te proporciona un paquete llamado @angular/animations. Este paquete te permite crear animaciones personalizadas de una manera sencilla y declarativa, sin tener que escribir mucho código JavaScript.
¿Cómo funciona?
En pocas palabras, @angular/animations te permite:
Definir estados: Estableces los diferentes estados que puede tener un elemento (por ejemplo, "visible", "oculto", "expandido").
Crear transiciones: Especificas cómo se transformará un elemento al pasar de un estado a otro (por ejemplo, una transición de fundido, una animación de deslizamiento).
Vincular las animaciones a eventos: Puedes activar o desactivar las animaciones en respuesta a eventos del usuario o cambios en los datos de tu aplicación.
¿Qué más puedes hacer con @angular/animations?
Animaciones complejas: Puedes crear animaciones mucho más sofisticadas, combinando múltiples estados, transiciones y efectos.
Animaciones basadas en rutas: Puedes crear animaciones cuando el usuario navega entre diferentes vistas de tu aplicación.
Personalización: Puedes personalizar las animaciones utilizando diferentes propiedades CSS y funciones de interpolación.
En resumen
@angular/animations es una herramienta poderosa que te permite agregar un toque de dinamismo y visualmente atractivo a tus aplicaciones Angular. Al entender los conceptos básicos de estados, transiciones y triggers, podrás crear animaciones personalizadas que mejoren la experiencia del usuario.
Primer ejemplo práctico:
Primero generamos el componente standalone:
ng generate component product-card --standalone
2. Importar los módulos necesarios:
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-product-card',
templateUrl: './product-card.component.html',
styleUrls: ['./product-card.component.css'],
animations: [
trigger('fadeInAndGrow', [
state('initial', style({
opacity: 0,
transform: 'scale(0.1)'
})),
state('final', style({
opacity: 1,
transform: 'scale(1)'
})),
transition('initial => final', animate('500ms ease-in'))
])
]
})
export class ProductCardComponent {
// ...
}
3. Crear la plantilla del componente:
<!--apertura del div-->
<div [@fadeInAndGrow]="state">
<!--Insercion de la imagen-->
<img src="..." alt="Producto">
<!--Titulo del producto-->
<h2>Nombre del producto</h2>
<!--Titulo del producto-->
<p>Descripción del producto</p>
<button>Añadir al carrito</button>
</div>