WEB DEVELOPER SITE
PYTHONJAVAPHP7
 

Angular 4 Animations


In this tutorial we learn about Animation of Angular 4. Angular 2.0 was Animation but Angular 4.0 support animation with no more a part of the @angular/core library .


Angular 4 needs to be imported in app.module.ts.

this a import the library
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
BrowserAnimationsModule needs to be added to the import array in app.module.ts as listed here:-

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html, we have added the html elements, which are to be animated. app.component.html
<div>
   <button (click)="animate()">Click Me
   <div [@myanimation] = "state" class="rotate">
     <img src="assets/images/img.png" width="100" height="100">
  </div>
</div>
</pre>

it is click event for which the animate function is called. and for the div, the @myanimation directive is added and show values in state
look at this app.component.ts for define animation
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

we can import the animation function that is to be used in the .ts file as shown above.
import { trigger, state, style, transition, animate } from '@angular/animations';
we can trigger, state, style, transition, and animate from @angular/animations. @Component () decorator −
animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]



For smaller state, we have given the style transform:translateY(100px) and transform:translateY(100px).
Let us now see the .html file to see how the transition function works
<div>
   <button (click)="animate()">Click Me
   <div [@myanimation] = "state" class="rotate">
     <img src="assets/images/img.png" width="100" height="100">
  </div>
</div>
</pre>


styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:500px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px #bec1c6;
   }
`],


On the click of a button it calls the animate function, which is defined in the app.component.ts file as follows −
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}
then run on browser (http://localhost:4200/)