How to apply transitions to Font Awesome 5 Vue Icons

I'm trying to switch an icon out and have a transition apply. I'm using the really nice vue-fontawesome npm package and I've got my icon set up like so, with computedIcon a computed property that returns which icon it should be:

<transition name="fade">
    <font-awesome-icon :icon="computedIcon" />
</transition>

This works fine, however the transition doesn't apply. Anyone able to point me in the right direction?

Thanks

transition component allows you to add entering/leaving transitions for any element or component in the following contexts:

• Conditiona rendering (using v-if)
• Conditional display (using v-show)
• Dynamic components
• Component root nodes

In your case you are applying transition on <font-awesome-icon> component and expect the transition to get applied whenever the icon prop changes.

But for performance vue tries to patch/reuse elements of the same type in-place as much as possible.

Since the is no actual replacing(entering or leaving) of the component the transition does not take place.

To solve this add a key attribute to tell vue to replace the component. See key attribute.

<transition name="fade" mode="out-in">
    <font-awesome-icon :key="new Date().getTime()" :icon="computedIcon" />
</transition>

Add mode='out-in' on the transition element so that the new elements waits until the old element transitions out. See Transition modes