vue.js中断svg-动画

li9yvcax 于 2023-02-09 发布在 Vue.js

关注(0)|答案(1)|浏览(152)

只要我使用new Vue(...)的svg动画不工作。
我找不到其他人有同样的问题...虽然大多数动画直接与vueidojs
我用animeiderjs试过了，但是它也不能和vueiderjs一起工作。有人知道这个问题的解决方案吗？
无Vue.js

toBars = document.getElementById("toBars");
toCross = document.getElementById("toCross");

isBars = true;
document.getElementById("start").onclick = function () {
    (isBars ? toCross : toBars).beginElement();
    isBars = !isBars;
};

//new Vue({ el: "#app" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

    <svg viewBox="0 0 32 32" width="128">
        <path id="p" d="M3 6 L29 6" stroke="black" stroke-width="6">
            <animate attributeType="XML" attributeName="d" from="M3 6 L29 6" to="M3 3L29 29" dur="0.2s" begin="indefinite" fill="freeze" id="toCross" />
            <animate attributeType="XML" attributeName="d" from="M3 3L29 29" to="M3 6 L29 6" dur="0.2s" begin="indefinite" fill="freeze" id="toBars" />
        </path>
    </svg>

    <button id="start">Click to start</button>

</div>

使用Vue.js
一个二个一个一个

vue.js

来源：https://stackoverflow.com/questions/63017985/vue-js-breaking-svg-animate

1条答案

按热度按时间

l7mqbcuq1#

正如User28所指出的，这一切都必须在Vue.js的上下文中进行
（我以前试过这个，但一定是另一个错误。）
工作示例：

new Vue({
    el: "#app",
    template: `
<div>
    <svg viewBox="0 0 32 32" width="128">
        <path id="p" d="M3 6 L29 6" stroke="black" stroke-width="6">
            <animate attributeType="XML" attributeName="d" from="M3 6 L29 6" to="M3 3L29 29" dur="0.2s" begin="indefinite" fill="freeze" ref="toCross" />
            <animate attributeType="XML" attributeName="d" from="M3 3L29 29" to="M3 6 L29 6" dur="0.2s" begin="indefinite" fill="freeze" ref="toBars" />
        </path>
    </svg>
    <button v-on:click="toggleState">Click to start</button>
</div>

`,
data: () => { return { isCross: false } },
methods: {
    toggleState: function() {
      console.log(this);
        this.isCross = !this.isCross;
        if (this.isCross)
            this.$refs.toCross.beginElement();
        else
            this.$refs.toBars.beginElement();
    }
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

</div>

赞(0）回复(0）举报 2023-02-09

我来回答

vue.js中断svg-动画

1条答案

相关问题

热门标签

最新问答