Is it possible to add a CSS class on ':enter' or ':leave' events of a component/element like used with Animations in Angular 10?

Question

With Angular Animations it's possible to add transitions/ animations to elements and their children when they enter or leave the view, like this:

@Component({
  animations: [
    trigger('containerTrigger', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(-10px)' }),
        animate('250ms 100ms', style({ opacity: 1, transform: 'none' })),
      ]),
    ]),
  ]
})

While this works fine, it gets complex very quickly when adding more complex transitons/ animations not only to the selected element but also its children.

Also for someone who is mainly maintining CSS in a project, it might be hard to get used to Angular's animation syntax. Then it's easier to read and maintain a CSS like this:

.container {
  opacity: 0;
  
  &.is-active {
    opacity: 1;
    transition: all 0.2s linear;
  }
}

.container__heading {
  transform: translateX(-10px);

  .container.is-active & {
      transform: none;
      transition: all 0.2s linear;
  }
}

The question: is it possible to add a CSS class on the :enter and :leave events instead of running an Angular Animation?

Answer 1

Unfortunatly you cant add or remove classes with angulars animation API (see How to give class name to animation state in angular 2/4?).

Binding with e.g. [ngClass] will also not work in this scenario, because when the :enter animation triggers, the element is not in the actual DOM yet, so any applied css will have no impact. https://angular.io/guide/transition-and-triggers#enter-and-leave-aliases