Learn Animations in angular.

Animation is getting more common in modern applications. Animation is the process of animating the objects on a web page and making shape changes and creating motions with elements.

Animation is defined as the transition from an initial state to a final state.

In order to use @angular/animation  in your application, you will have to do the following :

• Install by running npm install @angular/animations@latest -- save.
• Import  BrowserAnimationModule and add it to the module's import array [ see below ].

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

       @NgModule({
            imports: [
                BrowserAnimationsModule
          ],
       })

Basically, there are three types of  Animations States.

1. Wildcard(*) - this is the default state of the element. Eg: 

           active => * represents a state change from active to anything else.

1. Void - this is the state when the element is created but not yet part of the DOM.
2. Custom - this can be any custom name to indicate a certain state of the element.

Animation Transition timing:

Angular provides the three-timing property:

• Duration.
• Delay.
• Easing.

Importing Animation:

We want to add animation to our component.

import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';

Animation is defined  within the @component decorator  like so:

@Component({

  selector: 'app-home',

  templateUrl: './home.component.html',

  styleUrls: ['./home.component.scss'],

  animations: [

    // Animations here...

]

})

The transition between State changes

To animate the transition between the different states, we will need to pass in the transition function specifying the 2 states (* => * in the example below means anything to anything, we can use a more specific target too such as default => disabled depending on your requirements) the transition needs to be applied to, and the animation function needs to be executed during the transition.

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

@Component({
  ...
  animations: [
    trigger('enabledStateChange', [
      state(
        'default',
        style({
            opacity: 1,
        })
    ),
    state(
        'disabled',
        style({
            opacity: 0.5,
        })
      ),
      transition('* => *', animate('300ms ease-out')),
    ])
  ]
})

Enter and Exit Animations

trigger('fadeSlideInOut', [
    transition(':enter', [
        style({ opacity: 0, transform: 'translateY(10px)' }),
        animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
    ]),
    transition(':leave', [
        animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
    ]),
]),

Shake Animation

const ShakeAnimation = [
    style({ transform: 'rotate(0)' }),
    animate('0.1s', style({ transform: 'rotate(2deg)' })),
    animate('0.1s', style({ transform: 'rotate(-2deg)' })),
    animate('0.1s', style({ transform: 'rotate(2deg)' })),
    animate('0.1s', style({ transform: 'rotate(0)' })),
];
export const shake = [
    trigger('shake', [
        transition('* => default', [query('.card', ShakeAnimation)]),
    ]),
];

Route Animations

<div [@routeAnimation]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</div>

prepareRoute(outlet: RouterOutlet) {
    return outlet?.isActivated || '';
}

Inline Animations

<div  [style.transition]="'0.5s'"  [style.transform]="isScaledDown ? getScaleDown(index) : getResetScale()"></div>

isScaledDown = false;

getScaleDown(index: number): string {
    return `scale(${1 - (index + 1) / 10})`;
}

getResetScale(): string {
    return 'scale(1)';
}