Support animating icon changes

[karptonite]

Is it possible to transform fontawesome icons with css using angular fontawesome? For example, I'd like to be able to define a class "active" that rotates all specified icons 90 degrees with a 0.2s transition. I could do that pretty easily with css when we were using glyphicons, but it for angular-fontawesome, the only way I've found to do it is with the "rotate" attribute, and I'm not sure how to animate the transition.

[robmadole]

@karptonite you should be able to use CSS with angular-fontawesome too. Is there a reason why this won't work?

[LeonsBuntis]

It doesn't work with Just applying CSS style transition: transform 250ms;. Because the rotate function is not rotating existing DOM element using CSS, but deletes existing element and creates new element.

[devoto13]

Here is a working example: https://stackblitz.com/edit/angular-z8v4ux-9vvflc

The trick is to set class on the fa-icon components itself and also set display for it. Because by default Angular components don't have any display and therefore don't affect the display of their children.

[LeonsBuntis]

@devoto13 Thank you. But in your example you are not using rotate attribute provided by this libraries API, I thought It would be achievable that way.

[Bottlecaps4]

If you're referring to the fa-rotate-* class then all you need to do is to add transition: transform 2s; to the CSS class and it will animate the rotation. Toggling the fa-rotate-* class directly will animate the rotation directly to the icon.