问题描述
我正在尝试使用基于点击事件和路由更改的anime.js 实现一个svg 动画。第一个形状属于“home”路线,第二个形状属于“about”路线。动画是logo组件中的一个方法,通过点击父组件中的路由链接来调用。如果我使用 v-show 有条件地呈现 svg 路径,则动画工作正常,除了第一次加载和刷新页面后。奇怪的是,该函数实际上正在执行,它也可以在 devtools 中观察到。如果我使用 v-if 动画在第一次加载和重新加载后都有效,但它会出现故障。
logo.vue:
<template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<g>
<path v-if="mypath=='Home'" class="morph-path1" :d="shapes[0].d" />
<path v-if="mypath !='Home'" class="morph-path1" :d="shapes[1].d" />
</g>
</svg>
</template>
<script>
export default {
data(){
return{
mypath:this.$route.name,shapes: [
{
d: "M181.5,471.5c18.2-78.7,33.4-140.4,90-181c74.4-53.3,188.2-47,263,0c86.2,54.2,79.1,136.3,139,146c75.8,12.2,111.1-115.3,205-119c86.6-3.4,171.8,100.5,199,194c46.1,158.4-56.7,346.2-178,378c-120.6,31.6-173.7-113.2-357-115c-175-1.7-244.9,129.2-324,85C109.3,798.4,172.7,509.4,181.5,471.5z"
},{
d: "M207.5,399.5c18.7-45.4,67.8-164.7,186-189c115.6-23.7,243.9,54.6,266,144c19.8,80.1-56.2,126.7-31,181c41.2,88.9,262.8,3.5,335,98c65.9,86.2,4.1,317.8-165,394c-173.8,78.4-387.9-40.5-415-154c-17-71.1,44.6-118.5,13-176c-39.8-72.4-157.2-33-205-109C154.2,529.1,188.4,445.9,207.5,399.5z"
}
]
}
},watch: {
$route() {
this.mypath=this.$route.name
}
},methods: {
clickEvent(emitter){
if(emitter=="home"){
this.changeMorph({value: this.shapes[0].d});
}else{
this.changeMorph({value: this.shapes[1].d});
}
},changeMorph(shape) {
this.$anime({
targets: '.morph-path1',d: [
shape,],duration: 1000,direction: 'alternate',autoplay: true,easing: 'linear',elasticity: 2000,loop: false
});
}
},}
</script>
<style>
svg {
width: 400px;
height: 400px;
display: inline-block;
}
</style>
App.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/" >
<span @click="$refs.myChild.clickEvent('home')">Home</span>
</router-link>
<router-link to="/about" >
<span @click="$refs.myChild.clickEvent('about')">About</span>
</router-link>
</div>
<logo ref="myChild"/>
<router-view/>
</div>
</template>
<script>
import logo from './components/logo'
export default {
name: 'App',components: {
logo
}
}
</script>
我最初尝试用 Nuxt 实现它,结果是一样的,可以在这里找到那个版本:
https://github.com/neblancsi/svg-morphing
https://svg-morphing.netlify.app/
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)