What are some examples of animations in Angular?

What are some examples of animations in Angular?

Angular provides various animation capabilities using the Angular animations module. For example, you can create fade-in effects, slide transitions, and more.

Can you show me a simple fade-in example?

Sure! You can use the @Component decorator to define animations. Here's a simple fade-in example:

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

@Component({
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ])
    ])
  ]
})

You can then apply this animation to an element in your template.

What about slide transitions?

For slide transitions, you can define a similar trigger. Here's an example:

trigger('slideIn', [
  transition(':enter', [
    style({ transform: 'translateY(-100%)' }),
    animate('300ms ease-in', style({ transform: 'translateY(0)' }))
  ])
])

This will slide the element in from the top when it enters.

Are there any resources to learn more about Angular animations?

Yes! The official Angular documentation has a section on animations that covers various examples and use cases. You can find it at angular.io/guide/animations.