Browser module animation in ionic

The  concept of  browser module animation very useful in ionic  4 on animation point of view. The animation is apply in different  form in ionic 4 , Mainly two type of animation use in  ionic. We can  add animation  on  page push ,  and  second on specific component ,  item  , list,  card , so on  enable as animation mode.
   Now Quick  start with  browser module animation


Problems :-  Browser  animation module is not working after  installing  and well  import in app.module.ts.

Solution:- 100% work  ,  Go  to  ionic 4 project,  run command

npm i  @angular/animations@latest --save

npm i angular-animations --save

After  installing  two  in   ionic 4  project ,  Let's move to  integration process


Follow,  Step's

1:- Go to  app.module.ts

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

Then , inside import
import [

BrowserAnimationsModule,

]



2:-  Go to page ,  where you want to attach this animation

"Note there lot's of animation  in browser animation  module.  But  ,  i will  show a concept to use as all  animation. "Fade in " and "Fade Out"

Now,  I am  going to page "Home page "  having  four file "home.module.ts" ,  "home.page.html" ,  "home.page.scss" and  "home.page.spec.ts"

Inside "home.page.html" ,  simply paste this code

<ion-content>

<ion-button expand="full" color="danger" (click)="data_function()">Gitsof.com</ion-button>

<div *ngIf="google" [@fadeInOnEnter] >

<h1>GitSof.com is technical blog</h1>

</div>

<div *ngIf="google==false" [@fadeInOnEnter] >

<h3 > Welcome, Fellow user !!!!!!!</h3>

</div>

</ion-content>

3: - Go to "home.page.ts"  simply paste the given below code , Here  import  "fadein" , "fadeout" animation and make boolean  function that switch on button click.

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

import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

animations: [

fadeInOnEnterAnimation(),

fadeOutOnLeaveAnimation()

]

})

export class HomePage {

google : boolean = false

data_function(){

this.google = this.google === false ? true : false

}

}

Sources :-  https://github.com/filipows/angular-animations#readme

Get code browser animation  module https://github.com/divyajeetsingh/ionic-4-browser-animation-module