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

Question

我正在尝试切换图标并应用过渡。我正在使用非常好的 vue-fontawesome npm 包，我已经像这样设置了我的图标，computedIcon 一个计算的属性 returns 它应该是哪个图标：

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

这很好用，但是转换不适用。谁能给我指出正确的方向？

谢谢

Answer 1

transition 组件允许您在以下上下文中为任何元素或组件添加 entering/leaving 转换：

在您的情况下，您正在 <font-awesome-icon> 组件上应用过渡，并期望在 icon 属性更改时应用过渡。

但是为了性能，vue 会尽可能地尝试 patch/reuse 相同类型的元素 in-place。

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

为了解决这个问题，添加一个 key 属性来告诉 vue 替换组件。参见 key attribute。

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

在 transition 元素上添加 mode='out-in' 以便新元素等到旧元素过渡出来。参见 Transition modes

How to apply transitions to Font Awesome 5 Vue Icons