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?
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.
A staggered animation consists of sequential or overlapping animations. To create a staggered animation, use multiple Animation objects.
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.
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.
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!
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With