How to apply transitions to Font Awesome 5 Vue Icons
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