Чтобы анимировать смену класса в Angular, вы можете использовать различные методы в зависимости от ваших конкретных требований и предпочтений. Вот несколько часто используемых подходов:

1. Директива ngClass: Angular предоставляет директиву ngClass, которая позволяет вам динамически добавлять или удалять классы CSS на основе заданных условий. Привязав имя класса к переменной или выражению, вы можете переключать классы для создания анимации. Например:

   <div [ngClass]="{'class-to-add': condition, 'class-to-remove': !condition}"></div>

2. Renderer2: Класс Renderer2 в Angular предоставляет набор методов для безопасного управления DOM. Вы можете использовать методы addClass и RemoveClass для динамического добавления или удаления классов. Вот пример:

   import { Renderer2, ElementRef } from '@angular/core';
   constructor(private renderer: Renderer2, private el: ElementRef) {}
   animateChangeOfClass(condition: boolean) {
   if (condition) {
   this.renderer.addClass(this.el.nativeElement, 'class-to-add');
   this.renderer.removeClass(this.el.nativeElement, 'class-to-remove');
   } else {
   this.renderer.addClass(this.el.nativeElement, 'class-to-remove');
   this.renderer.removeClass(this.el.nativeElement, 'class-to-add');
   }
   }

3. HostBinding: декоратор HostBinding в Angular позволяет привязать свойство класса к основному элементу. Изменяя значение свойства, вы можете динамически переключать классы. Вот пример:

   import { HostBinding } from '@angular/core';
   @HostBinding('class.class-to-add') classToAdd: boolean;
   @HostBinding('class.class-to-remove') classToRemove: boolean;
   animateChangeOfClass(condition: boolean) {
   this.classToAdd = condition;
   this.classToRemove = !condition;
   }

Это некоторые часто используемые методы для анимации изменения класса в Angular. Не забудьте изменить имена классов и условия в соответствии с вашим конкретным вариантом использования.