Vue.js 在监视vuex状态的观察程序中切换GSAP动画时出现问题

我正在尝试切换内联svg的动画，只要从vuex存储中检索到的特定状态发生更改。为此，我使用观察者观察状态，并根据状态向前或向后播放动画。除了在第一次加载应用程序之后，这一切都很好。当观察者第一次看到状态的变化时，svg跳转到新位置而不是设置动画。第二个和所有进一步的切换效果良好，动画制作流畅。我错过了什么

示例代码：

<template>
  <div class="example">
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" aria-labelledby="menu" role="presentation">
      <line ref="top" x1="28" y1="18" x2="28" :y2="18"  stroke-width="2" stroke="currentColor"/>
    </svg>
</div>
</template>

<script>
import { mapState } from 'vuex' 
import { TimelineLite} from 'gsap'
export default {
  name: 'AnimatedIconExample',
  computed: {
    ...mapState({
        isActive: state => state.ui.isActive
    })
  },
  data: function(){
    return {
      timeline: new TimelineLite()
   },
  }
},
  watch: {
    isActive(newValue, oldValue){
        if(newValue){
          this.timeline.to( this.$refs.top, 0.3, { attr: {x1: 10, y1: 18, x2: 25, y2: 18 }})
          this.timeline.play()
        }else{
          this.timeline.reverse()
        }
     }
 }

从“vuex”导入{mapState}
从“gsap”导入{TimeLineSite}
导出默认值{
名称：'animateDictionExample'，
计算：{
…地图状态({
isActive:state=>state.ui.isActive
})
},
数据：函数（）{
返回{
时间线：新的时间线（）
},
}
},
观察：{
isActive（新值、旧值）{
如果（新值）{
this.timeline.to（this.$refs.top，0.3，{attr:{x1:10，y1:18，x2:25，y2:18}）
this.timeline.play（）
}否则{
this.timeline.reverse（）
}
}
}

您的watch属性不在对象的范围内。尝试：

<template>
  <div class="example">
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" aria-labelledby="menu" role="presentation">
      <line ref="top" x1="28" y1="18" x2="28" :y2="18"  stroke-width="2" stroke="currentColor"/>
    </svg>
</div>
</template>

<script>
import { mapState } from 'vuex'
import { TimelineLite} from 'gsap'

export default {
  name: 'AnimatedIconExample',

  data () {
    return {
      timeline: new TimelineLite()
    }
  },

  computed: {
    ...mapState({
        isActive: state => state.ui.isActive
    })
  },

  watch: {
    isActive(newValue, oldValue){
      if(newValue){
        this.timeline.to( this.$refs.top, 0.3, { attr: {x1: 10, y1: 18, x2: 25, y2: 18 }})
        this.timeline.play()
      } else{
        this.timeline.reverse()
      }
    }
  }
}

从“vuex”导入{mapState}
从“gsap”导入{TimeLineSite}
导出默认值{
名称：'animateDictionExample'，
数据（）{
返回{
时间线：新的时间线（）
}
},
计算：{
…地图状态({
isActive:state=>state.ui.isActive
})
},
观察：{
isActive（新值、旧值）{
如果（新值）{
this.timeline.to（this.$refs.top，0.3，{attr:{x1:10，y1:18，x2:25，y2:18}）
this.timeline.play（）
}否则{
this.timeline.reverse（）
}
}
}
}

我最终解决了这个问题，在

mounted（）

钩子的初始状态中添加了一个tween

  mounted(){
    this.timeline.to( this.$refs.top, 0.3, { attr: {x1: 28, y1: 18, x2: 28, y2: 18 }})
}

---

感谢您对此进行调查，我想是我不小心造成了这个错误，当我缩短代码将其发布到这里时，我发现它仍然存在问题。