Angular 6 Animations

Angular 6 Animations

Animations add a great deal of interaction between the elements in html. Animation with Angular2 was available too. The difference with Angular 6 is that animation is no longer part of the @angular / core library, but is a separate package to import into app.module.ts.

For example, we will import the library as follows –

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

As seen below − the BrowserAnimationsModule must be applied to the import array in app.module.ts

app.module.ts

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 { }

In app.component.html, we have added the html elements, which are to be animated.

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

We've installed one button and a div with an image for the main div. There is a click case where the feature animate is named for. And the @myanimation directive is added for the div, and given the value as a state.

Let's see the app.component.ts which defines the 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 will import the animation feature which is to be used as seen above in the.ts file.

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

Here from @angular / animations we imported control, state, design, transform, and animate.

We must now add the property of the animations to the @Component() decorator.

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Trigger describes animation startup. The first parameter to this is the animation name to be assigned to the html tag on which the animation is to be added. The second parameter is the functions that we imported-state, transition, etc.

The state function involves the steps of the animation, in which the product must transition. We've identified two States right now, smaller and larger. We provided the transform style: translateY(100px) and transform: translateY(100px) for smaller state.

Transition function adds the html element to animation. The first argument is for the states , i.e. start and end; the second argument acknowledges the role of animate. The animate method lets you determine a transition 's length, delay and easing.

Check the.html file now to see how the transition feature functions.

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src = "assets/images/img.png" width = "150" height = "150">
   </div>
</div>

The @component directive has a style property added which centrally aligns the div. Let us take the example below to understand the same –

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:250px;
   }
   .rotate{
      width:150px;
      height:150px;
      border:solid 1px blue;
   }
`],

Here a special] ["character is used to add styles, if any, to the html element. For the div we have provided the name of the animation specified in the file app.component.ts.

Clicking on a button calls the animate function, which is defined as follows in the app.component.ts file −

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

The state variable is set and the default value is given as lower. The feature animate adjusts the click-on state. When the state becomes larger, it converts to smaller; and if lower, it converts to better.

This is how the client performance (http:/localhost:4200/) looks like −

The transform function is applied in the direction of y, which is changed from 0 to 100px when clicking on the Click Me button. The image is stored in the folder Assets / Images.