Is it possible to add a CSS class on ':enter' or ':leave' events of a component/element like...

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?

Continue reading...