Optimizing Angular Animation Performance with transform and opacity

Enhance Angular animation performance by using properties such as transform and opacity that don't trigger layout changes, avoiding expensive reflows and repaints.

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

export const fadeInAnimation = trigger('fadeInAnimation', [
  state('void', style({
    opacity: 0
  })),
  state('*', style({
    opacity: 1
  })),
  transition('void => *', [
    animate('1s ease-in')
  ]),
  transition('* => void', [
    animate('1s ease-out')
  ])
]);

Defines an Angular animation trigger called fadeInAnimation that fades in elements by transitioning their opacity from 0 to 1.

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

export const slideInAnimation = trigger('slideInAnimation', [
  state('void', style({
    transform: 'translateX(-100%)'
  })),
  state('*', style({
    transform: 'translateX(0)'
  })),
  transition('void => *', [
    animate('0.5s ease-out')
  ]),
  transition('* => void', [
    animate('0.5s ease-in')
  ])
]);

Creates an Angular animation trigger called slideInAnimation that slides elements in from the left using the transform property.