Cursos Empresas Blog Live Conf Eventos Precios

0:004:04

Recursos

Resumen

Vamos a implementar el estado intermedio de la animación que nos permite ver una transición cuando el estado cambie de estado inicial a final.

Transiciones

Curso de Angular 4

Clase 51 de 80

Clase 51 / 80

Ivan Cardozo

Hace 8 años

Codigo de la clase.

lugares.component.ts

import { Component } from '@angular/core';
import { LugaresService } from '../services/lugares.service';
import { style, trigger, state, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-lugares',
  templateUrl: './lugares.component.html',
  animations: [trigger('contenedorAnimable' ,[
    // aca empieza la animacion
    state('inicial', style({
      opacity: 0,
      backgroundColor: 'green',
      transform: 'rotate3d(0,0,0 ,0deg)'
    })),
    state('final', style({
      opacity: 1,
      backgroundColor: 'yellow',
      transform: 'rotate3d(5,10,20,30deg)'
    })),
    transition('inicial => final', animate(1000)),
    transition('final => inicial', animate(500))
    // aca termina la animacion
  ])
]
})
export class LugaresComponent {
  title = 'Square';
  state = 'inicial';
  lat:number = -34.6080556;
  lng:number = -58.3724665;
  lugares = null;
  animar(){
    this.state = (this.state === 'final') ? 'inicial' : 'final';
  }
  constructor(private lugaresService:LugaresService){
      this.lugares = lugaresService.getLugares();
    };
}

lugares.component.html

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="13">
    <agm-marker *ngFor="let lugar of lugares" [latitude]="lugar.lat" [longitude]="lugar.lng"></agm-marker>
</agm-map>
<hr />
<div id="cuadrado" [@contenedorAnimable]="state"></div>
<a class="btn btn-default" (click)="animar()">Animar!</a>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h2>Lugares Cercanos</h2>
            <a class="btn btn-primary" routerLink="/crear/new">Crear Nuevo Negocio</a>
            <ul class="list-group">
                <ng-container *ngFor="let lugar of lugares">

                        <li class="list-group-item">
                            <a routerLink="/crear/{{lugar.id}}"><h3>{{lugar.nombre}}</h3></a>
                            <br />
                            <small>Creado: {{lugar.id | date:'mediumTime' | uppercase}}</small>
                            <p [innerHtml]="lugar.descripcion | linkifystr"></p>
                        </li>
                </ng-container>
            </ul>
        </div>
        <div class="col-md-4">
            <h2>Destacados</h2>
        </div>
    </div>
</div>

por si se equivocan en algo

Usuario anónimo

User

Hace 8 años

Genial es muy útil.

Comentarios (15)15 comentarios

Miguel López Ariza

Hace 9 años

Cuál es la ventaja de usar animaciones en Angular4? claramente, versus CSS3.
por que quizás pensándolo, si puedo testear las animaciones, quizás entonce si… sea útil hacerlo desde Angular4, pero de lo contrario es algo burdo a mi parecer.

Alberto Pedron

Una de las razones primordiales por las cuales es mejor usar el sistema de animaciones es por el hecho de que Angular ejecutará las animaciones dependiente del valor de alguna variable del componente, si lo quisieras hacer con CSS tendríás que usar ngClass junto a cada uno de los valores posibles con su respectiva clase animada al tener muchas el atributo contendrá un objeto bastante grande y feo en el template (.html), mientras que con Angular tendras una “máquina de estados” que podrás sacarle todo su potencial con tan solo cambiar el valor de dicha variable y mediante las transiciones puedes cambiar tanto la aceleración con la que entra y sale de cada una de ellas dependiente del estado del cual provienen y a cual irán cosa que es mucho mas dificil con css ya que tendrás que manejar muchas clases, un ejemplo del potencial de manejar animaciones con dicha metodología de estados es visible en motores como Unity3D ya que si por ejemplo tienes un personaje y quieres animarlo totalmente es tan facil con solo cambiar su estado (‘saltando’, ‘corriendo’, ‘atacando’, ‘volando’, ‘durmiendo’) y si lo piensas a fondo, una animacion desde “saltando => volando” se ejecutaríá mas rapido que una de “durmiendo” => “volando”, es un poco complejo de ver pero cuando te encuentres con animaciones complejas basadas en valores del componente te darás cuenta de todo el potencial que hay en el sistema de animaciones de Angular.

Sergio Alexander Florez Galeano

Gracias por la respuesta @pedronalbert, también me parecía un poco engorroso esto de animar con angular vs con css, pero ya me das una buena idea de que tiene su potencial.

Cuitláhuac García Togo

En angular 6 es necesario importar:

import { BrowserAnimationsModule} from '@angular/platform-browser/animations';

Cristian De Blasis

En el caso de tener muchos estados quizas puede ser tedioso combinar todas las transiciones. Por lo que vi se pueden usar el wildcards '*'. De esta manera si quiero hacer una transicion de any to any puedo escribirlo

transition('* => *',animate(1000))

Omar Gaston

Creo que en CSS es mas fácil, pero siempre es bueno saber.
Fuera bueno que en vez de poner las propiedades, uno pudiera elegir la clase directamente!

Armando Perdomo

@iBar_Ed
¿Estas animaciones terminan siendo transpiladas a código CSS?

Diego Forero

Team Platzi

Lo que permite es aplicar estilos css a un contenedor especifico, no es tanto que todo quede como css, solo le aplica el css al contenedor.

Carlos Uriel de Jesus Sánchez González

ya es decisión del programador si dedica tiempo con css o utiliza las animaciones, todo va a depender del nivel de manejo del css

Víctor Manuel Sarmiento Cayuelas

Acordaos de importar también transition:

import {trigger, state, style, animate, transition} from '@angular/animations';

Pablo Lionel Benitez

Hace 7 años

tengo en el app module importado BrowserAnimationsModule y todo lo demás, sin embargo la animación no ocurre, estoy usando angular 8

Lery Andy Piérola Lazarte

Es la propiedad "backgroundColor" que arroja el error, para angular 8 lo cambie por solo "background" y asi funciona :)

Marcos Galaviz

Hace 6 años

¿Como pongo una animacion indefinidamente?

Saludos.

Alex Camacho

Profesor

Deja su visualización como true indefinidamente para que no desaparezca :D

jeisson Andrade

Como puedo crear una animación cuando se cambie un estado de tipo bolean?

Edgar Moises Valdez Faria

Me parece muy verbosa la forma de animar, ensucia mucho el código y con este ejemplo no encontré la diferencia de hacerlo por css

Luis Fernando Niño Gonzalez

Cual sería la diferencia entre hacer las animaciones directamente desde CSS a hacerlas desde Angular??

Creo que sería igual a que diferencia tiene hacer animaciones usando JavaScript vs CSS, en cuanto a consumo de recursos es mucho mejor CSS.

Joshua Michael Rodriguez

¿A alguien mas le aparece el siguiente error en consola a la hora de dar clic en el bóton Animar?

[Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

Recursos

Resumen

Transiciones

Progreso del curso

Inicio del curso

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

Fin del curso

Sesiones en vivo

Contenido Bonus