Question

我正在创建一个Vue应用程序，其中根组件是通过主App.vue组件（通过import（''）指令）动态加载的。

在App.vue组件中，我放置了一个组件，该组件包含无限动画SVG（通过<animate>标签）和异步加载的控件。这个想法是，SVG应该是动画的，直到动态加载的控件被加载，然后我将其隐藏。
但是，这不会发生。 SVG永久冻结在第一帧中，直到加载并解析了动态组件.js文件。之后，SVG开始制作动画，但是那时为时已晚。

这是App.vue：

<template>
    <div style="height: 100%; width: 100%;">
        <loading v-if="loadingDisplayed" ></loading>
        <app-root @hook:mounted="onAppMounted"></app-root>
    </div>
</template>
<script lang="ts">

    import { Component, Vue } from 'vue-property-decorator';
    import Loading from './Components/Loading.vue'

    //import AppRoot from './Components/AppRoot.vue'
    const AppRoot = () => import(/* webpackChunkName: "root" */ './Components/AppRoot.vue').then(m => m.default);


    @Component({
        components: { AppRoot, Loading }
    })
    export default class App extends Vue {

        loadingDisplayed: boolean = true;

        onAppMounted() : void {
            this.loadingDisplayed = false;
        }

    }

</script>

这是加载控件：

<template>
    <div class="loader">
        <div style="flex-basis: 20%;">
            My title
        </div>
        <div>
            {{txt_loading}}
        </div>
        <div style="flex-basis: 80%;">
            <svg width="100%" height="100%" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
                <g fill="none" fill-rule="evenodd" stroke-width="2">
                    <circle cx="22" cy="22" r="1" stroke="black">
                        <animate attributeName="r"
                                 begin="0s" dur="1.8s"
                                 values="1; 20"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.165, 0.84, 0.44, 1"
                                 repeatCount="indefinite" />
                        <animate attributeName="stroke-opacity"
                                 begin="0s" dur="1.8s"
                                 values="1; 0"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.3, 0.61, 0.355, 1"
                                 repeatCount="indefinite" />
                    </circle>
                    <circle cx="22" cy="22" r="1" stroke="black">
                        <animate attributeName="r"
                                 begin="-0.9s" dur="1.8s"
                                 values="1; 20"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.165, 0.84, 0.44, 1"
                                 repeatCount="indefinite" />
                        <animate attributeName="stroke-opacity"
                                 begin="-0.9s" dur="1.8s"
                                 values="1; 0"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.3, 0.61, 0.355, 1"
                                 repeatCount="indefinite" />
                    </circle>
                </g>
            </svg>
        </div>
    </div>
</template>
<script lang="ts">

    import { Component, Vue } from 'vue-property-decorator';

    @Component
    export default class Loading extends Vue {
        txt_loading : "Please wait"
    }

</script>
<style lang="scss" scoped>
    .loader {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 2em;
        font-weight: bold;
    }

</style>

这是正常行为还是在浏览器加载.js文件时使SVG动画化？

Webpack加载动态Vue组件时SVG动画暂停

0 个答案: