我正在尝试切换图标并应用过渡。我正在使用非常好的 vue-fontawesome npm 包，我已经像这样设置了我的图标，使用 computedIcon 一个返回它应该是哪个图标的计算属性:
<transition name="fade">
<font-awesome-icon :icon="computedIcon" />
</transition>
这工作正常，但转换不适用。谁能指出我正确的方向？
谢谢
最佳答案
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
关于vue.js - 如何将过渡应用于 Font Awesome 5 Vue 图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49427008/