我正在尝试切换一个图标并应用过渡。我正在使用非常好的 vue-fontawesome npm 包，我已经像这样设置了我的图标，computedIcon一个计算属性，返回它应该是哪个图标：
<transition name="fade">
<font-awesome-icon :icon="computedIcon" />
</transition>
这工作正常，但是过渡不适用。有人能为我指出正确的方向吗？
谢谢
transition组件允许您在以下上下文中为任何元素或组件添加进入/离开过渡：
- 条件渲染(使用 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>
在transition元素上添加mode='out-in'，以便新元素等到旧元素转换出来。查看过渡模式