Animations in Angular

 Animations in angular:

----------------------
*The object with in a motion is called an animation
*Angular is providing set of functions with BrowserAnimationsModule with
 @angular/animations package to work with animations
 1.trigger--this is used to create an animation
 2.style  --this is used to apply style to an animation[backgroundcolor,transform,..]
 3.state  --this is used to create animation state by applying style
 4.transition--this is used to create transition between states with time period, time     period can be applied using animate function

Steps to work with animation:
 
1.create an animation
   syntax:
      @Component({
               ...
         animations:[
              trigger("animationname",[
                   state("state1",style({backgroundColor:'..',transform:'scale(..)'})),
                   state("state2",style({backgroundColor:'..',transform:'scale(..)'})),
               transition("state1=>state2",animate("nms ease-in")),
               transition("state2=>state1",animate("..."))
                                      ]),
              trigger("..",[..]),
                  ...
                   ]
                })
          ...
 
2.Apply animation to html element
    syntax:
       <tagname [@animationname]="varname">
 

 3.import BrowserAnimationsModule into AppModule


Example

Create a component

ng g c animatedemo --flat  








Component.ts

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

@Component({
  selector: 'app-animatedemo',
  templateUrl: './animatedemo.component.html',
  styleUrls: ['./animatedemo.component.css'],
  animations:[
    trigger("myanimation",[
      state("normal",style({backgroundColor:'bisque',transform:'scale(1.4)'})),
      state("large",style({backgroundColor:'yellow',transform:'scale(1.8)'})),
      transition("normal=>large",animate("2000ms ease-in")),
      transition("large=>normal",animate("8000ms ease-in"))
    ])
 ]
})
export class AnimatedemoComponent {
  statevalue:string="normal";
   toggle()
   {
     this.statevalue=(this.statevalue=='normal'?'large':'normal')
   } 
}


Component.html

<input type="button" value="animate" (click)="toggle()"> <br>

<p style="font-size:large;text-align:center;margin:200px;width:30%" 
[@myanimation]="statevalue">
    Rajakonda Uday Kumar
</p>


AppModule.ts















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



Output












On Clicking on Animate, it will call toggle method 











note:
-----
*Initially statevalue is normal,so p tag will be applied with normal state style
 [backgroundcolor:bisque,..]
*button click will change statevalue from normal to large,so p tag will be applied
 with large state style with in transition animate time period[2000ms->2secs]