CODEWITHSUNDEEP
cssangularanimation
Toto Briac
Toto Briac

Reputation: 936

Animation in Angular 2 with pure CSS

In my application, I have two components communicating with each other with BehaviorSubject since they are siblings. I have a form and a card, card can be either "question" or " answer" and its color changes accordingly.

To change it I use CSS variables. But I also want a "tilting" animation whenever the color changes. I can't use angular animation because the animation is not data-binded related and in my application, the card component is nested inside various components that are animated with "angular animation" and it's not working anyway.

What I try to do is to bind a class with animation to my card main div but it only triggers when the component loads. What is the correct way to make my card tilt whenever its color changes?

Here is a stackblitz that describes my issue.

Upvotes: 0

Views: 150

Answers (1)

Zahema
Zahema

Reputation: 1415

It can be done easily with Angular animations. Here is your example updated: https://stackblitz.com/edit/angular-ivy-aw3zs3?file=src/app/card/card.component.ts

You just need to provied a state function to handle the transtion trigger.

transition((fromState: string, toState: string) => toState != fromState, [
// animations
])

And you need to link the animation with the target variable

<div class="card" [style]="style" [@cardChange]="card.card">
</div>

Upvotes: 1

Related Questions