0 votes
in Angular by

What is the purpose of animate function?

1 Answer

0 votes
by
Angular Animations are a powerful way to implement sophisticated and compelling animations for your Angular single page web application.

import { Component, OnInit, Input } from '@angular/core';

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

@Component({

selector: 'app-animate',

templateUrl: `<div [@changeState]="currentState" class="myblock mx-auto"></div>`,

styleUrls: `.myblock {

    background-color: green;

    width: 300px;

    height: 250px;

    border-radius: 5px;

    margin: 5rem;

    }`,

animations: [

    trigger('changeState', [

    state('state1', style({

        backgroundColor: 'green',

        transform: 'scale(1)'

    })),

    state('state2', style({

        backgroundColor: 'red',

        transform: 'scale(1.5)'

    })),

    transition('*=>state1', animate('300ms')),

    transition('*=>state2', animate('2000ms'))

    ])

]

})

export class AnimateComponent implements OnInit {

    @Input() currentState;

    constructor() { }

    ngOnInit() {

    }
}
...