Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 859
lampshade Avatar asked Sep 10 '20 09:09

lampshade


People also ask

Which animation strategy would you use to apply multiple styles for a transition?

The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.

Which animation strategy would you use if there were multiple animations that had to occur at the same time?

A staggered animation consists of sequential or overlapping animations. To create a staggered animation, use multiple Animation objects.

How to add CSS in angular component?

Make It Easy: Different ways to add css in an Angular component. Different ways to add css in an Angular component. Different ways we can add styles in Angular application. Let us check those one by one. 1. Adding style url into the component. 2. Adding css inside the component. 3. Adding css along with template. 4. Inline style. 1.

Can you have two classes in CSS?

Not only CSS two classes, but you can add multiple classes in the same element. Let’s illustrate this further by the use of the following examples. In this coding block, we created a general class and shifted all those repeating properties to that class.

Is it possible to use CSS in angular animation?

Angular Animations use the Web Animations API and not CSS. See https://css-tricks.com/css-animations-vs-web-animations-api/ for further reading. Thanks for contributing an answer to Stack Overflow!

How to add multiple classes in an HTML element?

You can add multiple classes in one element by placing spaces between each class in HTML. Also, there is no limit to adding classes; you can add as many as you want You can place all repeating properties in each class in a separate class and add that class with each class If two classes combine, the element gets the styling from both classes.


1 Answers

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

like image 170
cpc Avatar answered Sep 20 '22 09:09

cpc