Angular provides a trigger() function for animation in order to collect the states and transitions with a specific animation name, so that you can attach it to the triggering element in the HTML template. This function watch for changes and trigger initiates the actions when a change occurs. For example, let’s create trigger named upDown, and attach it to the button element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | content_copy @Component({ selector: 'app-up-down', animations: [ trigger('upDown', [ state('up', style({ height: '200px', opacity: 1, backgroundColor: 'yellow' })), state('down', style({ height: '100px', opacity: 0.5, backgroundColor: 'green' })), transition('up => down', [ animate('1s') ]), transition('down => up', [ animate('0.5s') ]), ]), ], templateUrl: 'up-down.component.html', styleUrls: ['up-down.component.css'] }) export class UpDownComponent { isUp = true; toggle() { this.isUp = !this.isUp; } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
