[Angular] FadeIn and FadeOut animation in Angular

To define an Angular Animation, we using DSL type of language. Means we are going to define few animations ('fadeIn', 'fadeOut'). 

Then we need to define something called 'transition', which use those animations. 'transition' defines from which state to which state, we should apply animation.

Last we need trigger to pick off the animation.

A little bit more coding needed and might not be easy to get the idea at once. 

Remeber this 

Trigger transitions to use animations to animate style

Read from 'Right' to 'Left', what we need is 

1. animation
2. transitions
3. trigger

1. Animations:

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

/*
* DSL
* */
export const fadeIn = animation([
  // start
  style({
    opacity: 0,
    'border-radius': '5px'
  }),
  // end
  animate(
    '1000ms',
    style({
      opacity: 1,
    })
  )
]);

export const fadeOut = animation(
  animate(
    '500ms',
    style({opacity: 0})
  )
);

 

2. Transition:

/*
* Transition
* */
export const fadeInOut = trigger('fadeInOut', [
  transition('void => *', useAnimation(fadeIn)),
  transition('* => void', useAnimation(fadeOut))
]);

From 'void' means 'nothing..', the ui element might not in the DOM yet. 

To '*' any state, we use fadeIn animation.

From 'any state' to 'void', we use fadeOut animation.

 

And we also define 'fadeInOut' trigger to use in HTML:

  <au-modal [@fadeInOut] *auModalOpenOnClick="paymentModal" [body]="modalBody">


  </au-modal>

To see it works, we need to add animations in component:

import { Component } from '@angular/core';
import {fadeInOut} from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [fadeInOut]
})
export class AppComponent {
  title = 'app';
}

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

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

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ....
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}