Animation Timelines for Complex Sequences

Create complex animation sequences in Angular by utilizing animation timelines, allowing fine control over each step in the sequence for detailed choreography.

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

// Define a reusable animation
const reusableFadeAnimation = animation([
  style({ opacity: 0 }),
  animate('1s', style({ opacity: 1 }))
]);

export const fadeInAnimation = trigger('fadeIn', [
  transition(':enter', [
    useAnimation(reusableFadeAnimation)
  ])
]);

This code defines a reusable fade-in animation using Angular's animation API. The `reusableFadeAnimation` defines the keyframes for the fade-in effect, initially setting the opacity to 0 and animating it to 1 over 1 second. The `fadeInAnimation` is a trigger that can be used on entering elements to apply the defined fade-in effect.

import { group, query, stagger, animateChild, sequence } from '@angular/animations';

export const complexSequenceAnimation = trigger('complexSequence', [
  transition('* => active', [
    sequence([
      query('.item', [
        style({ opacity: 0 }),
        stagger(100, [
          animate('500ms', style({ opacity: 1 }))
        ])
      ]),
      query('@fadeIn', [
        animateChild()
      ])
    ])
  ])
]);

This code snippet defines a complex animation sequence using Angular's `query`, `group`, `sequence`, and `stagger` mechanisms. The `complexSequenceAnimation` trigger activates when the state changes to 'active'. It fades in multiple elements sequentially with a delay (`stagger`) of 100 milliseconds between each. It then searches for any children elements using the `fadeIn` animation trigger and activates their animations (`animateChild`).