Animation Triggers

/**
 * Creates a named animation trigger for component attachment
 * @param name - Unique trigger name within the component
 * @param definitions - Array of states and transitions defining the animation behavior
 * @returns AnimationTriggerMetadata for use in component animations array
 */
function trigger(
  name: string, 
  definitions: AnimationMetadata[]
): AnimationTriggerMetadata;

interface AnimationTriggerMetadata extends AnimationMetadata {
  name: string;
  definitions: AnimationMetadata[];
  options: { params?: { [name: string]: any } } | null;
}

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

// Basic fade animation
const fadeAnimation = trigger('fadeInOut', [
  state('in', style({ opacity: 1 })),
  transition(':enter', [
    style({ opacity: 0 }),
    animate(300, style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate(300, style({ opacity: 0 }))
  ])
]);

// Complex state-based animation
const slideAnimation = trigger('slideState', [
  state('closed', style({
    transform: 'translateX(-100%)',
    opacity: 0
  })),
  state('open', style({
    transform: 'translateX(0)',
    opacity: 1
  })),
  transition('closed => open', animate('300ms ease-in')),
  transition('open => closed', animate('300ms ease-out'))
]);

/**
 * Declares an animation state within a trigger
 * @param name - State name or comma-separated list of state names
 * @param styles - CSS styles associated with this state
 * @param options - Optional parameters for the state
 * @returns AnimationStateMetadata defining the state
 */
function state(
  name: string,
  styles: AnimationStyleMetadata,
  options?: { params: { [name: string]: any } }
): AnimationStateMetadata;

interface AnimationStateMetadata extends AnimationMetadata {
  name: string;
  styles: AnimationStyleMetadata;
  options?: { params: { [name: string]: any } };
}

import { state, style } from '@angular/animations';

// Simple state
const openState = state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
}));

// State with parameters
const parameterizedState = state('highlight', style({
  backgroundColor: '{{ color }}',
  transform: 'scale({{ scale }})'
}), { params: { color: 'red', scale: 1.1 } });

// Multiple state names
const multiState = state('active, focused', style({
  border: '2px solid blue'
}));

/**
 * Defines transition animation between states
 * @param stateChangeExpr - Expression matching state changes (e.g., 'open => closed', ':enter', ':leave')
 * @param steps - Animation steps to execute during transition
 * @param options - Optional timing and parameter configuration
 * @returns AnimationTransitionMetadata defining the transition
 */
function transition(
  stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any }) => boolean),
  steps: AnimationMetadata | AnimationMetadata[],
  options?: AnimationOptions | null
): AnimationTransitionMetadata;

interface AnimationTransitionMetadata extends AnimationMetadata {
  expr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any }) => boolean);
  animation: AnimationMetadata | AnimationMetadata[];
  options: AnimationOptions | null;
}

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

// Entry animation
const enterTransition = transition(':enter', [
  style({ transform: 'translateY(-100%)', opacity: 0 }),
  animate('300ms ease-in', style({ transform: 'translateY(0)', opacity: 1 }))
]);

// Exit animation
const leaveTransition = transition(':leave', [
  animate('300ms ease-out', style({ transform: 'translateY(-100%)', opacity: 0 }))
]);

// State-specific transition
const stateTransition = transition('inactive => active', [
  animate('200ms', style({ backgroundColor: 'green' }))
]);

// Bidirectional transition
const bidirectionalTransition = transition('open <=> closed', [
  animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)')
]);

// Function-based transition logic
const conditionalTransition = transition((fromState, toState) => {
  return fromState === 'idle' && toState === 'spinning';
}, [
  animate('500ms', style({ transform: 'rotate(360deg)' }))
]);

// Wildcard state - matches any state value
state('*', style({ opacity: 1 }))

// Void state - element not in DOM
transition('void => *', [
  style({ opacity: 0 }),
  animate(300, style({ opacity: 1 }))
])

// Any to any transition
transition('* => *', animate('300ms'))

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

@Component({
  selector: 'app-toggle',
  template: `
    <div [@toggleState]="isOpen ? 'open' : 'closed'" class="panel">
      <p>Panel content</p>
    </div>
    <button (click)="toggle()">Toggle</button>
  `,
  animations: [
    trigger('toggleState', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'lightblue'
      })),
      state('closed', style({
        height: '50px',
        opacity: 0.5,
        backgroundColor: 'lightgray'
      })),
      transition('open => closed', animate('300ms ease-out')),
      transition('closed => open', animate('300ms ease-in'))
    ])
  ]
})
export class ToggleComponent {
  isOpen = false;
  
  toggle() {
    this.isOpen = !this.isOpen;
  }
}

// Animation with parameters
trigger('parameterizedAnimation', [
  transition(':enter', [
    style({ 
      transform: 'translateX({{ startX }}px)',
      opacity: '{{ startOpacity }}'
    }),
    animate('{{ duration }}ms {{ easing }}', style({
      transform: 'translateX(0)',
      opacity: 1
    }))
  ])
])

// Template usage with parameters
@Component({
  template: `
    <div [@parameterizedAnimation]="{
      value: 'in',
      params: {
        startX: -100,
        startOpacity: 0,
        duration: 500,
        easing: 'ease-in-out'
      }
    }">
      Content
    </div>
  `
})