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

Question

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

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

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

谢谢

Answer 1

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

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

在您的情况下，您正在 <font-awesome-icon> 上应用转换组件并期望在 icon 时应用转换 Prop 变化。

但为了性能，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