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

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

0 голосов
/ 17 января 2020

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

Ответы [ 2 ]

0 голосов
/ 27 января 2020

Я наконец-то решил эту проблему, добавив анимацию движения в начальное состояние к крюку mounted() 

  mounted(){
    this.timeline.to( this.$refs.top, 0.3, { attr: {x1: 28, y1: 18, x2: 28, y2: 18 }})
}
0 голосов
/ 17 января 2020

Ваше свойство 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()
      }
    }
  }
}
...