Font-awesome: CSS transition does not work with FA svg icons

[kamil-tekiela]

When using Font awesome Icon with JQuery to apply class .fa-rotate-90 on click the transition property gets ignored. I assume it happens due to the SVG element being rewritten when new class is applied to the SVG element. The same thing happens when I make a copy of the class .fa-rotate-90 in a my own CSS file with the same transform property and apply this one instead. The icon is rotated correctly but without the transition happening.
Transition property is added using custom class .menuIcon

$(".toggleClick").click(function () {
    $(this).find(".menuIcon").toggleClass("rotate-90");
});

```html

I overcame this issue by applying a wrapper SPAN:
```html
<span class="menuIcon"><i class="fas fa-angle-right fa-fw"></i></span>

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I assume it happens due to the SVG element being rewritten when new class is applied to the SVG element.

Yes, please go for idempotent events: https://jsfiddle.net/tagliala/qu83xrwp/25/

$(document).on('click', '.toggleClick', function() {
    $(this).toggleClass('rotate-90')
});

Hope it helps

Closing here

[kamil-tekiela]

Hi @tagliala ,

Could you please explain a little more how to use the idempotent events properly?
Your example in jsfiddle doesn't help me much.
Could you please check out the difference between the 2 examples below? In the first one the span is transformed 90deg with the transition 200ms. In the second example where transition is applied directly to the SVG the element is transformed but without transition.

SPAN Wrapper
https://jsfiddle.net/qu83xrwp/35/
No wrapper:
https://jsfiddle.net/qu83xrwp/37/

Thanks.

[tagliala]

@kit246 Sorry!

The issue is about transition and not transform 🤦‍♂️

Please keep using a wrapper for the moment.

There is an issue with you use case. Don't know if this could be solved or if it should be documented

@robmadole something is happening when the class list includes fa fa-iconname

Fails with fa fa-home: https://jsfiddle.net/tagliala/qu83xrwp/57/
Ok: https://jsfiddle.net/tagliala/qu83xrwp/56

[robmadole]

Yep, I think I know what's going on with this. It can probably be solved. I'll add it to the list.

[xcellsoft]

FYI, i just ran into this issue as well, what i did was reference the svg tag in the class, the transition won't work directly on the <i> tag, it needs to affect the child <svg> tag.

<i class="fa-thumbtack oc-thumbtack-up">

.oc-thumbtack-up svg {
    animation: oc-thumbtack-up-kf 200ms ease-out;
    animation-fill-mode: forwards;
    transform-origin: center;
}

@keyframes oc-thumbtack-up-kf {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
}

.oc-thumbtack-down svg {
    animation: oc-thumbtack-down-kf 200ms ease-in;
    animation-fill-mode: forwards;
    transform-origin: center;
}

@keyframes oc-thumbtack-down-kf {
    0% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}