Проблема с переключением анимации GSAP в наблюдателе, который наблюдает за состоянием vuex.

Я пытаюсь переключить анимацию встроенного 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()
        }
     }
 }

animation vue.js vuex gsap
person Carsten H    schedule 17.01.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ваше свойство 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()
      }
    }
  }
}
person Karma Blackshaw    schedule 17.01.2020
comment
Спасибо за изучение этого, я думаю, я случайно создал эту ошибку, когда я сократил код, чтобы опубликовать его здесь, и у меня все еще есть проблема. - person Carsten H; 17.01.2020

arrow_upward
0
arrow_downward

Я, наконец, решил это, добавив tween в начальное состояние к хуку mounted().

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