Expert Angular

One more example - Angular animations

In the preceding section, we learned about the basics of animation; in this section, we will create one more example using Angular animations.

In this example, we will create a button and a div element. When the button is clicked, the div element will slide into to the page. Cool, right?

Let's get this started. Add the following code to the component file we created in the preceding section: learn-animation.component.ts:

 trigger('animationToggle', [  transition('show => hide', [   style({transform: 'translateX(-100%)'}),   animate(350) ]),   transition('hide => show', animate('3000ms')) ])

The following are the important things to note in the preceding code:

1. We are creating a trigger with animationToggle ...