vue.js - vue动态组件触发动画

Question

描述

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

我面临的问题是为图标设置动画。

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

但是，通过该middleware组件调用图标时，并没有执行动画，因为组件在 isPausedprop 的 toggle 时一直在渲染。

我已经尝试过使用keep-live，虽然它不渲染，但动画不运行。

我做错了什么还是有更好的选择？

代码

调用组件midleware

<button-with-icon
    :icon="{
        component: () => import( /* webpackChunkName: 'IconPlayBig' */ '@/components/bundles/layout/images/icons/IconPlayBig' ),
        props: { isPause }
    }"
    class="panel__header__close position--absolute"
    :action="{
        execute: true,
        function: () => { isPause = !isPause; }
    }"
/>

零件midleware

<template>
    <base-button
        type="button"
        class="background--transparent accessibility--button accessibility--active"
        :hasHover="hasHover"
        :customClass="true"
        v-on="{
            ...( action.execute && {
                click: click
            })
        }"
    >
        <template #button__icon>
             <component
                :is="icon.component"
                :class="icon.class"
                v-bind="{ ...icon.props }"
                tabindex="-1"
              />
        </template>
    </base-button>
</template>

<script>
export default {
    components: {
        Test: () => import( /* webpackChunkName: 'IconPlayBig' */ '@/components/bundles/layout/images/icons/IconPlayBig' ),
        BaseButton: () => import( /* webpackChunkName: 'BaseButton' */ '@/components/bundles/buttons/BaseButton' )
    },
    props: {
        icon: Object,
        hasHover: {
            type: Boolean,
            default: false
        },
        action: {
            type: Object,
            default: () => ({ })
        }
    },
    setup ( props ) {
        const click = () => {
            props.action.function( props.action.param );
        };

        return { click };
    }
};
</script>

结果

我想要的是

我现在拥有的

我现在拥有的 - 与keep-live