Question

从vuex商店检索到的某个状态更改后，我试图切换内嵌svg的动画。为此，我用观察者观察状态，并根据状态向前或向后播放动画。除首次加载应用程序后，此方法运行良好。当观察者第一次注意到状态变化时，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()
        }
     }
 }

Answer 1

您的监视属性不在对象范围内。试试：

<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()
      }
    }
  }
}

Answer 2

我终于解决了这一问题，方法是将初始状态的补间添加到trait MyTrait { public function getName() : string { return parent::getName() . '_special'; } } class MyParentClass { public function getName(): string { return "MyName"; } } class MyClass extends MyParentClass { use MyTrait; }挂钩中。

mounted()

在正在观察vuex状态的观察器中切换GSAP动画的问题

2 个答案: