vue.js - 如何将过渡应用到 Font Awesome 5 Vue 图标

Question

我正在尝试切换图标并应用过渡。我正在使用非常好的 vue-fontawesome npm 包，我的图标设置如下，computedIcon计算属性返回它应该是哪个图标：

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

这工作正常，但过渡不适用。谁能指出我正确的方向？

谢谢

Answer 1

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

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

在您的情况下，您正在对<font-awesome-icon>组件应用过渡，并希望在icon道具更改时应用过渡。

但是为了提高性能，vue 尝试尽可能多地就地修补/重用相同类型的元素。

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

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

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

添加元素mode='out-in'，transition以便新元素等到旧元素过渡出来。请参阅过渡模式