What is the purpose of animate function?
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() {}}
October 28, 2022
131
Read more
What is Angular Framework?
November 04, 2022
AngularWhat is a Angular module?
November 03, 2022
AngularWhat are the steps to use animation module?
October 31, 2022
Angular