Angular 2 - 14) Animaciones

Objetivo:

• Aplicar animación trigger, state, transform

1. Abrir el proyecto package.json y agregar la dependencia del módulo de animación

"dependencies": {

  "@angular/animations": "~4.2.0",

  "@angular/common": "^4.0.0",

  "@angular/compiler": "^4.0.0",

  "@angular/core": "^4.0.0",

  "@angular/forms": "^4.0.0",

  "@angular/http": "^4.0.0",

  "@angular/platform-browser": "^4.0.0",

  "@angular/platform-browser-dynamic": "^4.0.0",

  "@angular/router": "^4.0.0",

  "core-js": "^2.4.1",

  "rxjs": "^5.1.0",

  "zone.js": "^0.8.4"

},

2. Abrir una consola y ejecutar npm install para instalar la dependencia de animations
3. Dentro de app crear una carpeta llamada animations.
4. Dentro de la carpeta animations crear un archivo llamado animations.components.css y agregar el siguiente contenido

p {

  width:200px;

  background:lightgray;

  margin: 100px auto;

  text-align:center;

  padding:20px;

  font-size:1.5em;

}

5. Dentro de la carpeta animations crear un archivo llamado animations.component.html y agregar el siguiente contenido:

<p [@myAwesomeAnimation]='stateAnimation' (click)="animateMe()">Mi animacion</p>

6. Dentro de la carpeta animations crear un archivo llamado animations.component.ts y agregar el siguiente contenido:

import { Component, OnInit } from '@angular/core';

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

@Component({

selector: 'app-animations',

templateUrl: './animations.component.html',

styleUrls: ['./animations.component.css'],

animations:  [

  trigger('myAwesomeAnimation', [

      state('small', style({

          transform: 'scale(1)',

      })),

      state('large', style({

          transform: 'scale(1.2)',

      })),

      transition('small => large', animate('100ms',style({

          transform: 'translateY(40px)'

      }))),

  ]),

]

})

export class AnimationsComponent implements OnInit {

stateAnimation: string = 'small';

 constructor() { }

animateMe() {

  this.stateAnimation = (this.stateAnimation === 'small' ? 'large' : 'small');

}

ngOnInit() {

}

}

Para los puntos anteriores revisar la opción de crear el component desde la consola. Mirar este link: https://github.com/angular/angular-cli/wiki/generate-component

7. Abrir el archivo llamado app.module.ts y agregar lo siguiente:

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

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { ROUTES } from './app.route';

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

import { AppComponent } from './app.component';

import { UsersComponent } from './users/users.component';

import { UserFormComponent } from './user-form/user-form.component';

import { UserService } from './shared/services/user.service';

import { AnimationsComponent } from './animations/animations.component';

@NgModule({

declarations: [

  AppComponent,

  UsersComponent,

  UserFormComponent,

  AnimationsComponent

],

imports: [

  BrowserModule,

  FormsModule,

  HttpModule,

  ROUTES,

  BrowserAnimationsModule

],

providers: [

  UserService

],

bootstrap: [AppComponent]

})

export class AppModule { }

8. Abrir el archivo app.route.ts y actualizar el contenido con esta información:

import { ModuleWithProviders } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { UsersComponent } from './users/users.component';

import { UserFormComponent } from './user-form/user-form.component';

import { AnimationsComponent } from './animations/animations.component';

export const ROUTE: Routes = [

  { path: '', redirectTo: 'users', pathMatch: 'full' },

  { path: 'users', component: UsersComponent },

  { path: 'new-user', component: UserFormComponent },

  { path: 'animations' , component: AnimationsComponent }

];

export const ROUTES: ModuleWithProviders = RouterModule.forRoot(ROUTE);

9. Desde la consola ejecutar ng serve

Repositorio en GitHub