Чтобы установить пакет @angular/animationsс помощью npm, вы можете выполнить следующие действия:

1. Откройте терминал или командную строку.
2. Перейдите в каталог проекта Angular.
3. Выполните следующую команду:

npm install @angular/animations

Эта команда загрузит и установит пакет @angular/animationsв ваш проект.

Что касается методов с примерами кода, вот несколько часто используемых методов, предоставляемых модулем Angular Animations:

1. триггер: определяет триггер анимации, который можно прикрепить к элементу. Триггеры могут иметь одно или несколько состояний и переходов.

import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
  selector: 'app-example',
  animations: [
    trigger('myAnimation', [
      state('start', style({ backgroundColor: 'red' })),
      state('end', style({ backgroundColor: 'blue' })),
      transition('start => end', animate('1s')),
      transition('end => start', animate('1s')),
    ]),
  ],
  template: `
    <div [@myAnimation]="currentState" (click)="toggleAnimation()">
      Click me to animate!
    </div>
  `,
})
export class ExampleComponent {
  currentState = 'start';
  toggleAnimation() {
    this.currentState = this.currentState === 'start' ? 'end' : 'start';
  }
}

2. animate: определяет стили анимации и время перехода элемента.

import { animate, style, transition, trigger } from '@angular/animations';
@Component({
  selector: 'app-example',
  animations: [
    trigger('myAnimation', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate('500ms', style({ opacity: 0 })),
      ]),
    ]),
  ],
  template: `
    <div *ngIf="showElement" [@myAnimation]>
      This element will fade in and out
    </div>
  `,
})
export class ExampleComponent {
  showElement = false;
  toggleElement() {
    this.showElement = !this.showElement;
  }
}

3. ключевые кадры: определяет последовательность стилей и смещений для анимации.

import { animate, keyframes, style, transition, trigger } from '@angular/animations';
@Component({
  selector: 'app-example',
  animations: [
    trigger('myAnimation', [
      transition('* => animate', [
        animate('1s', keyframes([
          style({ transform: 'scale(0)', opacity: 0, offset: 0 }),
          style({ transform: 'scale(1.2)', opacity: 1, offset: 0.5 }),
          style({ transform: 'scale(1)', opacity: 1, offset: 1 }),
        ])),
      ]),
    ]),
  ],
  template: `
    <div [@myAnimation]="animationState" (click)="startAnimation()">
      Click me to start animation!
    </div>
  `,
})
export class ExampleComponent {
  animationState = '';
  startAnimation() {
    this.animationState = 'animate';
  }
}