Vue.js Vue动态组件触发动画 描述

在我插入的项目中，大多数操作都是通过图标执行的。因此，我创建了一个组件，其中包含按钮的基本组件，并在通过道具时动态导入图标

我面临的问题是如何设置图标的动画

我有一个图标，其中的目标是在播放/暂停之间切换，预期结果如下（不介意条的位置，我仍在处理动画）

但是，当通过该

中间件

组件调用图标时，不会执行动画，因为当启动

属性的切换时，组件始终处于渲染状态

我已经尝试过使用
保持活动状态
，虽然它不渲染，但动画不会运行

我做错了什么，或者有更好的选择吗

代码
调用组件
midleware


组件
midleware

导出默认值{
组成部分：{
测试：（）=>导入（/*webpackChunkName:'IconPlayBig'*/'@/components/bundles/layout/images/icons/IconPlayBig'），
BaseButton:（）=>导入（/*webpackChunkName:'BaseButton'*/'@/components/bundles/buttons/BaseButton'））
},
道具：{
图标：对象，
哈索弗：{
类型：布尔型，
默认值：false
},
行动：{
类型：对象，
默认值：（）=>（{}）
}
},
设置（道具）{
常量单击=（）=>{
props.action.function（props.action.param）；
};
返回{click}；
}
};

结果
我想要什么

我现在有什么

我现在所拥有的-与
保持联系