3回答

viTaemin_nanali

提问者

2021-08-11

import { ref, computed, watch } from 'vue'

import { useStore } from 'vuex'

export default function useCD () {

  const cdWrapper = ref(null)

  const cdRef = ref(null)

  const reset = ref(false)

  const store = useStore()

  const playing = computed(() => store.state.playing)

  const currentSong = computed(() => store.getters.currentSong)

  const cdCls = computed(() => {

    return (!reset.value && playing.value) ? 'playing' : ''

  })

  watch(playing, newPlaying => {

    if (!newPlaying) {

      synchronizeAnimationAngle(cdWrapper.value, cdRef.value)

    }

  })

  watch(currentSong, () => {

    reset.value = true

    cdWrapper.value.style.transform = 'none'

    setTimeout(() => {

      reset.value = false

    }, 200)

  })

  function synchronizeAnimationAngle (wrapper, inner) {

    const wrapperTrans = getComputedStyle(wrapper).transform

    const innerTrans = getComputedStyle(inner).transform

    wrapper.style.transform = wrapperTrans === 'none' ? innerTrans : innerTrans.concat(' ', wrapperTrans)

  }

  return {

    cdWrapper,

    cdRef,

    cdCls

  }

}

0

0

AshinLX

2021-08-02

请问你这个问题解决了吗，我也用的你那种监听currentIndex的方式去清空，但是没生效

0

6

慕圣6063872

回复

她叫赵安心

我和你类似，只不过把状态的改变放在了prev ,next, loop 中，保证是切歌才触发。然后我把你的setTimeout换成了nextTick也可以。但是说实话这种感觉方法很取巧，感觉就像是在watch中还是其他地方都找不到合适的时机修改标志位为false，所以随便设了个时间。我的想法是可以手动调用一次pause()让"playing"样式消失，再作处理。

2021-12-23

共6条回复

ustbhuangyi

2021-07-14

清空 transform 的值就可以了吧

0

5

ustbhuangyi

回复

viTaemin_nanali

你把代码传到 GitHub 上，我抽空帮你看看

2021-07-15

共5条回复