如何将过渡应用于Font Awesome 5 Vue图标

Question

我正在尝试切换图标并应用转换。我正在使用非常好的vue-fontawesome npm包，我已经设置了我的图标，computedIcon计算属性，返回应该是的图标：

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

这样可以正常工作，但转换不适用。有人能指出我正确的方向吗？

由于

Answer 1

transition组件允许您在以下上下文中为任何元素或组件添加进入/离开过渡：

• 条件渲染（使用v-if）
• 条件显示（使用v-show）
• 动态组件
• 组件根节点

在您的情况下，您正在<font-awesome-icon>组件上应用转换，并希望只要icon道具更改，就会应用转换。

但是对于性能vue尝试尽可能地就地修补/重用相同类型的元素。

由于组件没有实际替换（进入或离开），因此不会发生转换。

要解决此问题，请添加key属性以告知vue替换该组件。请参阅key attribute。

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

在mode='out-in'元素上添加transition，以便新元素等待，直到旧元素转出。见Transition modes