### CSS Transition Timing and Easing

Source: https://angular.dev/guide/animations/css

Shows how to control the timing, delay, and easing functions for CSS transitions (non-`@keyframes` animations) using individual properties or the `transition` shorthand.

```css
.example-element {
  transition-duration: 1s;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out;
  transition-property: margin-right;
}
.example-shorthand {
  transition: margin-right 1s ease-in-out 500ms;
}
```

--------------------------------

### CSS Animation Timing and Easing

Source: https://angular.dev/guide/animations/css

Illustrates how to control the timing, delay, and easing functions for CSS keyframe animations using individual properties or the `animation` shorthand.

```css
.example-element {
  animation-duration: 1s;
  animation-delay: 500ms;
  animation-timing-function: ease-in-out;
}
.example-shorthand {
  animation: exampleAnimation 1s ease-in-out 500ms;
}
```

--------------------------------

### Angular Open/Close Animation Component

Source: https://angular.dev/guide/animations/css

Demonstrates a basic Angular component that toggles the visibility of an element using a signal. This is a foundational example for creating open/close animations.

```typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-open-close',
  templateUrl: 'open-close.html',
  styleUrls: ['open-close.css'],
})
export class OpenClose {
  isOpen = signal(true);
  toggle() {
    this.isOpen.update((isOpen) => !isOpen);
  }
}
```

--------------------------------

### Advanced View Transition Control with onViewTransitionCreated in Angular

Source: https://angular.dev/guide/animations/route-animations

This example shows how to use the `onViewTransitionCreated` callback within `withViewTransitions` for advanced control. It injects the Router service to get navigation information and uses `isActive` to conditionally skip transitions based on URL changes (e.g., ignoring fragment or query parameter changes).

```typescript
import {inject} from '@angular/core';
import {Router, withViewTransitions, isActive} from '@angular/router';

withViewTransitions({
  onViewTransitionCreated: ({transition}) => {
    const router = inject(Router);
    const targetUrl = router.currentNavigation()!.finalUrl!;

    // Skip transition if only fragment or query params change
    const config = {
      paths: 'exact',
      matrixParams: 'exact',
      fragment: 'ignored',
      queryParams: 'ignored',
    };

    const isTargetRouteCurrent = isActive(targetUrl, router, config);
    if (isTargetRouteCurrent()) {
      transition.skipTransition();
    }
  },
});
```

--------------------------------

### Animating State Changes with CSS Classes

Source: https://angular.dev/guide/animations/css

Demonstrates how to animate transitions between different element states (e.g., open/closed) by toggling CSS classes. This utilizes CSS transitions for smooth style changes.

```css
.open {
  height: '200px';
  opacity: 1;
  background-color: 'yellow';
  transition: all 1s;
}
.closed {
  height: '100px';
  opacity: 0.8;
  background-color: 'blue';
  transition: all 1s;
}
```

--------------------------------

### Staggering Animations in a List (TypeScript)

Source: https://angular.dev/guide/animations/css

Demonstrates how to stagger animations for list items to create a cascade effect using `animation-delay` or `transition-delay`. This TypeScript code manages the visibility signal for the list items.

```typescript
import {Component, signal} from '@angular/core';@Component({
  selector: 'app-stagger',
  templateUrl: './stagger.html',
  styleUrls: ['stagger.css'],
})export class Stagger {
  show = signal(true);
  items = [1, 2, 3];
  refresh() {
    this.show.set(false);
    setTimeout(() => {
      this.show.set(true);
    }, 10);
  }}

```

--------------------------------

### Stagger Animation with Native CSS

Source: https://angular.dev/guide/animations/migration

Shows how to achieve a stagger effect using native CSS by leveraging `animation-delay` or `transition-delay`. This example uses Angular's component structure but relies on CSS for the staggered animation timing.

```typescript
import {Component, signal} from '@angular/core';

@Component({
  selector: 'app-stagger',
  templateUrl: './stagger.html',
  styleUrls: ['stagger.css'],
})
export class Stagger {
  show = signal(true);
  items = [1, 2, 3];

  refresh() {
    this.show.set(false);
    setTimeout(() => {
      this.show.set(true);
    }, 10);
  }
}
```

--------------------------------

### Parallel Animations (CSS)

Source: https://angular.dev/guide/animations/css

Shows how to apply multiple animations to a single element simultaneously using the CSS `animation` shorthand property. Each animation can have independent durations and delays.

```css
.target-element {
  animation:
    rotate 3s,
    fade-in 2s;
}

```

--------------------------------

### Stagger Animation with Angular Animations Package

Source: https://angular.dev/guide/animations/migration

Example of implementing a stagger effect for a list of items using Angular's animation package. It queries for elements with the class 'item' and applies a staggered animation to create a cascading entry effect.

```typescript
import {Component, HostBinding, signal} from '@angular/core';
import {trigger, transition, animate, style, query, stagger} from '@angular/animations';

@Component({
  selector: 'app-stagger',
  templateUrl: 'stagger.html',
  styleUrls: ['stagger.css'],
  animations: [
    trigger('pageAnimations', [
      transition(':enter', [
        query('.item', [
          style({opacity: 0, transform: 'translateY(-10px)'}),
          stagger(200, [animate('500ms ease-in', style({opacity: 1, transform: 'none'}))]),
        ]),
      ]),
    ]),
  ],
})
export class Stagger {
  @HostBinding('@pageAnimations')
  items = [1, 2, 3];
}
```

--------------------------------

### Angular Auto Height Animation Component

Source: https://angular.dev/guide/animations/css

An Angular component showcasing how to animate an element's height to 'auto'. It utilizes signals for state management and provides a toggle function similar to the open/close example.

```typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-auto-height',
  templateUrl: 'auto-height.html',
  styleUrls: ['auto-height.css'],
})
export class AutoHeight {
  isOpen = signal(true);
  toggle() {
    this.isOpen.update((isOpen) => !isOpen);
  }
}
```

--------------------------------

### Animate Increment/Decrement with Angular Animations Package

Source: https://angular.dev/guide/animations/migration

This example animates numerical increments and decrements using Angular's Animations Package. It defines transitions for ':increment' and ':decrement' to apply style changes like color and transform.

```typescript
import {Component, signal} from '@angular/core';import {trigger, transition, animate, style, query, stagger} from '@angular/animations';@Component({
  selector: 'app-increment-decrement',
  templateUrl: 'increment-decrement.html',
  styleUrls: ['increment-decrement.css'],
  animations: [
    trigger('incrementAnimation', [
      transition(':increment', [
        animate('300ms ease-out', style({color: 'green', transform: 'scale(1.3, 1.2)'})),
      ]),
      transition(':decrement', [
        animate('300ms ease-out', style({color: 'red', transform: 'scale(0.8, 0.9)'})),
      ]),
    ]),
  ],
})export class IncrementDecrement {
  num = signal(0);
  modify(n: number) {
    this.num.update((v) => (v += n));
  }}

```

--------------------------------

### Animating List Items on Reorder (TypeScript)

Source: https://angular.dev/guide/animations/css

Illustrates animating items in a list as they are reordered. This TypeScript code handles the randomization of list items, which triggers entry and leave animations using `@starting-styles` or `animate.enter`/`animate.leave`.

```typescript
import {Component, signal} from '@angular/core';@Component({
  selector: 'app-reorder',
  templateUrl: './reorder.html',
  styleUrls: ['reorder.css'],
})export class Reorder {
  show = signal(true);
  items = ['stuff', 'things', 'cheese', 'paper', 'scissors', 'rock'];
  randomize() {
    const randItems = [...this.items];
    const newItems = [];
    for (let i of this.items) {
      const max: number = this.items.length - newItems.length;
      const randNum = Math.floor(Math.random() * max);
      newItems.push(...randItems.splice(randNum, 1));
    }
    this.items = newItems;
  }}

```

--------------------------------

### Angular Insert Element Animation Component

Source: https://angular.dev/guide/animations/css

This Angular component demonstrates how to animate an element entering a view using `animate.enter`. It uses signals to control the element's visibility and a toggle function.

```typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-insert',
  templateUrl: 'insert.html',
  styleUrls: ['insert.css'],
})
export class Insert {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
}
```

--------------------------------

### Programmatic Animation Control (JavaScript)

Source: https://angular.dev/guide/animations/css

Explains how to programmatically control animations using the native `Element.getAnimations()` method. This JavaScript approach allows direct manipulation of animation states like `cancel()`, `play()`, `pause()`, and `reverse()`.

```javascript
// Example usage (conceptual):
const element = document.getElementById('myAnimatedElement');
const animations = element.getAnimations();

animations.forEach(animation => {
  animation.pause(); // Pause all animations on the element
});

```

--------------------------------

### CSS to Disable Animations

Source: https://angular.dev/guide/animations/css

A CSS class that can be applied to an element to disable all animations and transitions. This is useful for selectively turning off animations without affecting other parts of the application.

```css
.no-animation {
  animation: none !important;
  transition: none !important;
}
```

--------------------------------

### Reusable CSS Keyframe Animations

Source: https://angular.dev/guide/animations/css

Defines a reusable animation using `@keyframes` and applies it to an element via a CSS class. This allows for consistent animation behavior across your application.

```css
@keyframes sharedAnimation {
  to {
    height: 0;
    opacity: 1;
    background-color: 'red';
  }
}
.animated-class {
  animation: sharedAnimation 1s;
}
```

--------------------------------

### Reordering List Component with Native CSS (No Animations)

Source: https://angular.dev/guide/animations/migration

This TypeScript snippet defines an Angular component for a reordering list without using the animations package. It includes basic component setup and a method to randomize the order of items. Animations are expected to be handled via CSS classes if needed.

```typescript
import {Component, signal} from '@angular/core';

@Component({
  selector: 'app-reorder',
  templateUrl: './reorder.html',
  styleUrls: ['reorder.css'],
})
export class Reorder {
  show = signal(true);
  items = ['stuff', 'things', 'cheese', 'paper', 'scissors', 'rock'];

  randomize() {
    const randItems = [...this.items];
    const newItems = [];
    for (let i of this.items) {
      const max: number = this.items.length - newItems.length;
      const randNum = Math.floor(Math.random() * max);
      newItems.push(...randItems.splice(randNum, 1));
    }
    this.items = newItems;
  }
}
```

--------------------------------

### Angular Increment/Decrement Animation Component

Source: https://angular.dev/guide/animations/css

This Angular component implements animations for incrementing and decrementing a numerical value. It listens for animation end events to manage CSS classes and updates the displayed number.

```typescript
import {Component, ElementRef, OnInit, signal, viewChild} from '@angular/core';
@Component({
  selector: 'app-increment-decrement',
  templateUrl: 'increment-decrement.html',
  styleUrls: ['increment-decrement.css'],
})
export class IncrementDecrement implements OnInit {
  num = signal(0);
  el = viewChild<ElementRef<HTMLParagraphElement>>('el');
  ngOnInit() {
    this.el()?.nativeElement.addEventListener('animationend', (ev) => {
      if (ev.animationName.endsWith('decrement') || ev.animationName.endsWith('increment')) {
        this.animationFinished();
      }
    });
  }
  modify(n: number) {
    const targetClass = n > 0 ? 'increment' : 'decrement';
    this.num.update((v) => (v += n));
    this.el()?.nativeElement.classList.add(targetClass);
  }
  animationFinished() {
    this.el()?.nativeElement.classList.remove('increment', 'decrement');
  }
  ngOnDestroy() {
    this.el()?.nativeElement.removeEventListener('animationend', this.animationFinished);
  }
}
```

--------------------------------

### Animating State Transitions: Angular Animations Package vs. Native CSS

Source: https://angular.dev/guide/animations/migration

Illustrates how to manage element states like 'open' and 'closed' using Angular's state() function and its native CSS equivalent with class-based styling and transitions.

```typescript
// ...
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
```

```css
.open {
  height: '200px';
  opacity: 1;
  background-color: 'yellow';
  transition: all 1s;
}
.closed {
  height: '100px';
  opacity: 0.8;
  background-color: 'blue';
  transition: all 1s;
}
```

--------------------------------

### Basic View Transitions API Structure

Source: https://angular.dev/guide/animations/route-animations

Demonstrates the fundamental structure of the browser's `document.startViewTransition` API, which captures the current state, updates the DOM, captures the new state, and plays the transition animation.

```javascript
document.startViewTransition(async () => {
  await updateTheDOMSomehow();
});
```

--------------------------------

### Parallel Animations with CSS

Source: https://angular.dev/guide/animations/migration

Illustrates how to run multiple CSS animations simultaneously on an element. By listing multiple animation properties within the `animation` shorthand, they will all execute concurrently.

```css
.target-element {
  animation:
    rotate 3s,
    fade-in 2s;
}
```

--------------------------------

### CSS Keyframe Animation Timing

Source: https://angular.dev/guide/animations/migration

Demonstrates how to specify duration, delay, and timing function for CSS keyframe animations using individual properties or the shorthand 'animation' property.

```css
.example-element {  animation-duration: 1s;  animation-delay: 500ms;  animation-timing-function: ease-in-out;}.example-shorthand {  animation: exampleAnimation 1s ease-in-out 500ms;}
```

--------------------------------

### Reusable Animations: Angular Animations Package vs. Native CSS

Source: https://angular.dev/guide/animations/migration

Demonstrates how to define reusable animations using Angular's animation() function in TypeScript and its equivalent using @keyframes and CSS classes in native CSS.

```typescript
export const sharedAnimation = animation([
  style({
    height: 0,
    opacity: 1,
    backgroundColor: 'red',
  }),
  animate('1s'),
]);
```

```css
@keyframes sharedAnimation {
  to {
    height: 0;
    opacity: 1;
    background-color: 'red';
  }
}
.animated-class {
  animation: sharedAnimation 1s;
}
```

--------------------------------

### Angular Remove Element Animation Component

Source: https://angular.dev/guide/animations/css

An Angular component that animates an element leaving a view using `animate.leave`. Similar to the insert component, it manages visibility with signals and a toggle function.

```typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-remove',
  templateUrl: 'remove.html',
  styleUrls: ['remove.css'],
})
export class Remove {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
}
```

--------------------------------

### CSS Transition Timing

Source: https://angular.dev/guide/animations/migration

Shows how to define duration, delay, and timing function for CSS transitions using individual properties or the shorthand 'transition' property. It also includes specifying the property to transition.

```css
.example-element {  transition-duration: 1s;  transition-delay: 500ms;  transition-timing-function: ease-in-out;  transition-property: margin-right;}.example-shorthand {  transition: margin-right 1s ease-in-out 500ms;}
```

--------------------------------

### Animate Reordering List Items with Angular Animations

Source: https://angular.dev/guide/animations/migration

This snippet demonstrates how to animate items entering and leaving a reordering list using Angular's `@angular/animations` package. It defines enter and leave transitions with specific styles and timings. No external dependencies are required beyond Angular.

```typescript
import {Component, signal} from '@angular/core';
import {trigger, transition, animate, query, style} from '@angular/animations';

@Component({
  selector: 'app-reorder',
  templateUrl: './reorder.html',
  styleUrls: ['reorder.css'],
  animations: [
    trigger('itemAnimation', [
      transition(':enter', [
        style({opacity: 0, transform: 'translateX(-10px)'}),
        animate('300ms', style({opacity: 1, transform: 'translateX(none)'})),
      ]),
      transition(':leave', [
        style({opacity: 1, transform: 'translateX(none)'}),
        animate('300ms', style({opacity: 0, transform: 'translateX(-10px)'})),
      ]),
    ]),
  ],
})
export class Reorder {
  show = signal(true);
  items = ['stuff', 'things', 'cheese', 'paper', 'scissors', 'rock'];

  randomize() {
    const randItems = [...this.items];
    const newItems = [];
    for (let i of this.items) {
      const max: number = this.items.length - newItems.length;
      const randNum = Math.floor(Math.random() * max);
      newItems.push(...randItems.splice(randNum, 1));
    }
    this.items = newItems;
  }
}
```

--------------------------------

### Enable View Transitions in Angular Router (Standalone Bootstrap)

Source: https://angular.dev/guide/animations/route-animations

Shows how to enable view transitions in an Angular application using the standalone bootstrap approach by adding the `withViewTransitions` feature to the `provideRouter` configuration.

```typescript
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  provideRouter,
  withViewTransitions
} from '@angular/router';
import {routes} from './app.routes';

bootstrapApplication(MyApp, {
  providers: [
    provideRouter(routes, withViewTransitions()),
  ],
});
```

--------------------------------

### Parallel Animation with group() in Angular

Source: https://angular.dev/guide/animations/complex-sequences

Demonstrates parallel animations using `trigger('flyInOut')`. The `:enter` and `:leave` transitions utilize the `group()` function to apply multiple animations simultaneously. This allows for different easing functions and timing configurations for properties like transform and opacity.

```typescript
animations: [
    trigger('flyInOut', [
      state(
        'in',
        style({
          width: '*',
          transform: 'translateX(0)',
          opacity: 1,
        }),
      ),
      transition(':enter', [
        style({width: 10, transform: 'translateX(50px)', opacity: 0}),
        group([
          animate(
            '0.3s 0.1s ease',
            style({
              transform: 'translateX(0)',
              width: '*',
            }),
          ),
          animate(
            '0.3s ease',
            style({
              opacity: 1,
            }),
          ),
        ]),
      ]),
      transition(':leave', [
        group([
          animate(
            '0.3s ease',
            style({
              transform: 'translateX(50px)',
              width: 10,
            }),
          ),
          animate(
            '0.3s 0.2s ease',
            style({
              opacity: 0,
            }),
          ),
        ]),
      ]),
    ]),
  ]
```

--------------------------------

### Enable Animations in Angular Tests with TestBed

Source: https://angular.dev/guide/animations/enter-and-leave

Configures TestBed to enable animations in the test environment. This is useful for end-to-end tests where animations need to be visually verified. By default, TestBed disables animations.

```typescript
TestBed.configureTestingModule({
  animationsEnabled: true
});
```

--------------------------------

### Enable View Transitions in Angular Router (NgModule Bootstrap)

Source: https://angular.dev/guide/animations/route-animations

Illustrates how to enable view transitions in an Angular application using the NgModule bootstrap approach by setting `enableViewTransitions: true` in the `RouterModule.forRoot` configuration.

```typescript
import {
  NgModule
} from '@angular/core';
import {
  RouterModule
} from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      enableViewTransitions: true
    })
  ],
})
export class AppRouting {}
```

--------------------------------

### Angular Animations: Auto Height Component

Source: https://angular.dev/guide/animations/migration

Demonstrates animating a component's height to 'auto' using Angular's animations package. It defines states for open and closed, with a transition that animates between them.

```typescript
import {Component, signal} from '@angular/core';import {trigger, transition, state, animate, style} from '@angular/animations';@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      state('true', style({height: '*'}),
      state('false', style({height: '0px'})),
      transition('false <=> true', animate(1000)),
    ]),
  ],
  templateUrl: 'auto-height.html',
  styleUrl: 'auto-height.css',
})
export class AutoHeight {
  isOpen = signal(false);
  toggle() {
    this.isOpen.update((isOpen) => !isOpen);
  }
}
```

--------------------------------

### Angular Enter Animation with Binding (TypeScript)

Source: https://angular.dev/guide/animations/enter-and-leave

This TypeScript code demonstrates using `animate.enter` with a dynamic class binding in an Angular component. It includes a signal for the element's shown state, a toggle function, and another signal to manage the CSS class applied during the enter animation. This allows for more flexible animation control.

```typescript
import {Component, signal} from '@angular/core';@Component({
  selector: 'app-enter-binding',
  templateUrl: 'enter-binding.html',
  styleUrls: ['enter-binding.css'],
})
export class EnterBinding {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
  enterClass = signal('enter-animation');
}
```

--------------------------------

### Import and Use Reusable Animation in Component

Source: https://angular.dev/guide/animations/reusable-animations

Demonstrates how to import a reusable animation definition (`transitionAnimation`) and use it within an Angular component's trigger. The `useAnimation()` function is employed to apply the animation with specific parameters.

```typescript
import {Component, input} from '@angular/core';
import {transition, trigger, useAnimation, AnimationEvent} from '@angular/animations';
import {transitionAnimation} from './animations';

@Component({
  selector: 'app-open-close-reusable',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transitionAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s',
          },
        }),
      ]),
    ]),
  ],
  templateUrl: 'open-close.html',
  styleUrls: ['open-close.css'],
})
```

--------------------------------

### Customizing View Transitions with CSS in Angular

Source: https://angular.dev/guide/animations/route-animations

This snippet demonstrates how to customize view transitions using CSS by targeting pseudo-elements like ::view-transition-old() and ::view-transition-new(). It requires defining keyframe animations and applying them to elements with a specific 'view-transition-name'. Animations should be defined in global styles, not component styles, due to Angular's view encapsulation.

```css
/* Define keyframe animations */
@keyframes rotate-out {
  to {
    transform: rotate(90deg);
  }
}
@keyframes rotate-in {
  from {
    transform: rotate(-90deg);
  }
}

/* Target view transition pseudo-elements */
::view-transition-old(count),
::view-transition-new(count) {
  animation-duration: 200ms;
  animation-name: -ua-view-transition-fade-in, rotate-in;
}

::view-transition-old(count) {
  animation-name: -ua-view-transition-fade-out, rotate-out;
}
```

--------------------------------

### Sequential Animation with stagger() in Angular

Source: https://angular.dev/guide/animations/complex-sequences

Defines a page-level animation using `trigger('pageAnimations')` with a `:enter` transition. It uses `query` to select elements with the class 'hero' and applies an initial `style` before using `stagger` to animate them sequentially with a delay.

```typescript
animations: [
    trigger('pageAnimations', [
      transition(':enter', [
        query('.hero', [
          style({opacity: 0, transform: 'translateY(-100px)'}),
          stagger(30, [
            animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({opacity: 1, transform: 'none'})),
          ]),
        ]),
      ]),
    ]),
  ]
```

--------------------------------

### Filter Animation for Hero List (TypeScript)

Source: https://angular.dev/guide/animations/complex-sequences

This TypeScript code defines a component with a trigger for 'filterAnimation'. It handles entering and leaving elements for list filtering, applying styles and staggering effects. It also includes logic for filtering heroes based on search criteria and updating the total count.

```typescript
@Component({
  animations: [
    trigger('filterAnimation', [
      transition(':enter, * => 0, * => -1', []),
      transition(':increment', [
        query(
          ':enter',
          [
            style({opacity: 0, width: 0}),
            stagger(50, [animate('300ms ease-out', style({opacity: 1, width: '*'}))]),
          ],
          {optional: true},
        ),
      ]),
      transition(':decrement', [
        query(':leave', [stagger(50, [animate('300ms ease-out', style({opacity: 0, width: 0}))])]),
      ]),
    ]),
  ],
})
export class HeroListPage implements OnInit {
  heroesTotal = -1;
  get heroes() {
    return this._heroes;
  }
  private _heroes: Hero[] = [];
  ngOnInit() {
    this._heroes = HEROES;
  }
  updateCriteria(criteria: string) {
    criteria = criteria ? criteria.trim() : '';
    this._heroes = HEROES.filter((hero) =>
      hero.name.toLowerCase().includes(criteria.toLowerCase()),
    );
    const newTotal = this.heroes.length;
    if (this.heroesTotal !== newTotal) {
      this.heroesTotal = newTotal;
    } else if (!criteria) {
      this.heroesTotal = -1;
    }
  }
}
```

--------------------------------

### Animate Element Insertion and Removal with Angular Animations Package

Source: https://angular.dev/guide/animations/migration

This code implements animations for elements entering and leaving the view using Angular's Animations Package. It defines a trigger with ':enter' and ':leave' transitions to control opacity.

```typescript
import {Component} from '@angular/core';import {trigger, transition, animate, style} from '@angular/animations';@Component({
  selector: 'app-insert-remove',
  animations: [
    trigger('myInsertRemoveTrigger', [
      transition(':enter', [style({opacity: 0}), animate('200ms', style({opacity: 1}))]),
      transition(':leave', [animate('200ms', style({opacity: 0}))]),
    ]),
  ],
  templateUrl: 'insert-remove.html',
  styleUrls: ['insert-remove.css'],
})export class InsertRemove {
  isShown = false;
  toggle() {
    this.isShown = !this.isShown;
  }}

```

--------------------------------

### Using animate.leave with Event Bindings and Callbacks (TypeScript)

Source: https://angular.dev/guide/animations/enter-and-leave

Demonstrates how to use `animate.leave` with event bindings to call component functions, such as integrating with third-party animation libraries like GSAP. The `leavingFn` handles the animation logic and must call `event.animationComplete()` to notify Angular when the animation is finished.

```typescript
import {AnimationCallbackEvent, Component, signal} from '@angular/core';
@Component({
  selector: 'app-leave-binding',
  templateUrl: 'leave-event.html',
  styleUrls: ['leave-event.css'],
})
export class LeaveEvent {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
  leavingFn(event: AnimationCallbackEvent) {
    // Example of calling GSAP
    // gsap.to(event.target, {
    //   duration: 1,
    //   x: 100,
    //   // arrow functions are handy for concise callbacks
    //   onComplete: () => event.animationComplete()
    // });
    event.animationComplete();
  }
}
```

--------------------------------

### Filter Animation Trigger in HTML

Source: https://angular.dev/guide/animations/complex-sequences

An HTML template snippet demonstrating a filter input and an unordered list (`ul`) that displays heroes. The `ul` element has a dynamic trigger `[@filterAnimation]` bound to `heroesTotal`, which controls the visibility and animation of list items based on user input.

```html
<label for="search">Search heroes: </label><input  type="text"  id="search"  #criteria  (input)="updateCriteria(criteria.value)"  placeholder="Search heroes"/><ul class="heroes" [@filterAnimation]="heroesTotal">
  @for (hero of heroes; track hero) {
    <li class="hero">
      <div class="inner">
        <span class="badge">{{ hero.id }}</span>
        <span class="name">{{ hero.name }}</span>
      </div>
    </li>
  }
</ul>
```

--------------------------------

### Animate Element Insertion with Native CSS

Source: https://angular.dev/guide/animations/migration

This snippet shows how to handle element insertion using native CSS, controlled by an Angular component. It uses a signal to manage the visibility state and a toggle function to update it.

```typescript
import {Component, signal} from '@angular/core';@Component({
  selector: 'app-insert',
  templateUrl: 'insert.html',
  styleUrls: ['insert.css'],
})export class Insert {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }}

```

--------------------------------

### Animate Element Removal with Native CSS

Source: https://angular.dev/guide/animations/migration

This code demonstrates controlling element removal with native CSS, managed by an Angular component. It employs a signal for the visibility state and a toggle function for updates.

```typescript
import {Component, signal} from '@angular/core';@Component({
  selector: 'app-remove',
  templateUrl: 'remove.html',
  styleUrls: ['remove.css'],
})export class Remove {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }}

```

--------------------------------

### Angular Enter Animation Component (TypeScript)

Source: https://angular.dev/guide/animations/enter-and-leave

This TypeScript code defines an Angular component that uses `animate.enter` to manage the visibility and animation of an element. It includes a signal to track the element's shown state and a toggle function to change it. The component relies on separate HTML and CSS files for its template and styles.

```typescript
import {Component, signal} from '@angular/core';@Component({
  selector: 'app-enter',
  templateUrl: 'enter.html',
  styleUrls: ['enter.css'],
})
export class Enter {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
}
```

--------------------------------

### Disable Animations with CSS Class

Source: https://angular.dev/guide/animations/migration

Demonstrates how to disable all CSS animations and transitions on an element by applying a custom class. This method is effective but prevents animation events from firing, requiring workarounds for scenarios like element removal.

```css
.no-animation {  animation: none !important;  transition: none !important;}
```

--------------------------------

### Angular Animations: Open/Close Component

Source: https://angular.dev/guide/animations/migration

Implements an open/close animation for a component using Angular's animations package. It defines states, transitions, and keyframes for the animation, triggered by a component property.

```typescript
import {Component, signal} from '@angular/core';import {trigger, transition, state, animate, style, keyframes} from '@angular/animations';@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
      state(
        'closed',
        style({
          height: '100px',
          opacity: 0.5,
          backgroundColor: 'green',
        }),
      ),
      // ...
      transition('* => *', [
        animate(
          '1s',
          keyframes([
            style({opacity: 0.1, offset: 0.1}),
            style({opacity: 0.6, offset: 0.2}),
            style({opacity: 1, offset: 0.5}),
            style({opacity: 0.2, offset: 0.7}),
          ]),
        ),
      ]),
    ]),
  ],
  templateUrl: 'open-close.html',
  styleUrl: 'open-close.css',
})
export class OpenClose {
  isOpen = signal(false);
  toggle() {
    this.isOpen.update((isOpen) => !isOpen);
  }
}
```

--------------------------------

### Basic Element Toggle with animate.leave (TypeScript)

Source: https://angular.dev/guide/animations/enter-and-leave

Demonstrates a basic Angular component that uses `animate.leave` to toggle the visibility of an element. The `isShown` signal controls the element's presence in the DOM, triggering the leave animation when set to false.

```typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-leave',
  templateUrl: 'leave.html',
  styleUrls: ['leave.css'],
})
export class Leave {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
}
```

--------------------------------

### Animate Increment/Decrement with Native CSS

Source: https://angular.dev/guide/animations/migration

This code implements animations for numerical increments and decrements using native CSS, managed by an Angular component. It adds and removes CSS classes programmatically to trigger animations on number changes.

```typescript
import {Component, ElementRef, OnInit, signal, viewChild} from '@angular/core';@Component({
  selector: 'app-increment-decrement',
  templateUrl: 'increment-decrement.html',
  styleUrls: ['increment-decrement.css'],
})export class IncrementDecrement implements OnInit {
  num = signal(0);
  el = viewChild<ElementRef<HTMLParagraphElement>>('el');
  ngOnInit() {
    this.el()?.nativeElement.addEventListener('animationend', (ev) => {
      if (ev.animationName.endsWith('decrement') || ev.animationName.endsWith('increment')) {
        this.animationFinished();
      }
    });
  }
  modify(n: number) {
    const targetClass = n > 0 ? 'increment' : 'decrement';
    this.num.update((v) => (v += n));
    this.el()?.nativeElement.classList.add(targetClass);
  }
  animationFinished() {
    this.el()?.nativeElement.classList.remove('increment', 'decrement');
  }
  ngOnDestroy() {
    this.el()?.nativeElement.removeEventListener('animationend', this.animationFinished);
  }}

```

--------------------------------

### Animate Auto Height with Angular Animations Package

Source: https://angular.dev/guide/animations/migration

This snippet demonstrates how to animate the height of an element automatically using Angular's Animations Package. It utilizes a signal to control the open/closed state and a toggle function to change it.

```typescript
import {Component, signal} from '@angular/core';@Component({
  selector: 'app-auto-height',
  templateUrl: 'auto-height.html',
  styleUrls: ['auto-height.css'],
})export class AutoHeight {
  isOpen = signal(true);
  toggle() {
    this.isOpen.update((isOpen) => !isOpen);
  }}

```

--------------------------------

### Element Toggle with animate.leave and Signal Binding (TypeScript)

Source: https://angular.dev/guide/animations/enter-and-leave

Shows an Angular component using `animate.leave` with signal binding for toggling element visibility. The `farewell` signal can be used to customize the leave animation, and the component includes a `toggle` function to manage the `isShown` signal.

```typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-leave-binding',
  templateUrl: 'leave-binding.html',
  styleUrls: ['leave-binding.css'],
})
export class LeaveBinding {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
  farewell = signal('leaving');
}
```

--------------------------------

### Define Reusable Animation with animation()

Source: https://angular.dev/guide/animations/reusable-animations

Defines a reusable animation using the `animation()` function. This animation can be exported and imported into other components. It takes parameters like height, opacity, and background color, which are interpolated during runtime.

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

export const transitionAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}',
  }),
  animate('{{ time }}'),
]);
```

--------------------------------

### Export Animation Trigger with useAnimation()

Source: https://angular.dev/guide/animations/reusable-animations

Exports an animation trigger that utilizes a previously defined reusable animation. The `useAnimation()` function allows passing specific parameters to the reusable animation, such as height, opacity, background color, and time.

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

export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s',
      },
    }),
  ]),
]);
```

--------------------------------

### Parent Element Removal and animate.leave (TypeScript)

Source: https://angular.dev/guide/animations/enter-and-leave

Illustrates an Angular component where `animate.leave` is applied. It highlights that `animate.leave` will not animate if it's on a descendant element of the one being removed, as the parent's removal takes precedence. The `toggle` function controls the visibility.

```typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-leave-parent',
  templateUrl: 'leave-parent.html',
  styleUrls: ['leave-parent.css'],
})
export class LeaveParent {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
}
```