老师，唱片旋转我有疑问，咋个能让它切下一首歌的时候恢复成原始角度呢？

Question

点击切换上一首或者下一首时，唱片的角度也是叠加的，如何把它改为切下一首还原成从正北开始超右边旋转？

Answer 1

提问者 viTaemin_nanali 2021-08-11 16:08:50

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

  }

}

Answer 2

AshinLX 2021-08-02 14:00:17

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

• 提问者 viTaemin_nanali #1

  解决了，我给你粘不同的代码
  const reset = ref(false)
  const currentSong = computed(() => store.getters.currentSong)
  watch(currentSong, () => {
      reset.value = true
      cdWrapper.value.style.transform = 'none'
      setTimeout(() => {
        reset.value = false
      }, 200)
    })
  const cdCls = computed(() => {
      return (!reset.value && playing.value) ? 'playing' : ''
    })

• AshinLX #2

  谢谢！

• 提问者 viTaemin_nanali #3

  问题在于playing这个样式，只要处于播放状态就一直都在，只要它在就没法进行样式transform重置，而播放状态切歌也是true，而我们想要的只是切歌的时候回正，所以自己给个变量，在切歌的一瞬间变为false，然后立刻变回true就不影响转圈的特效了。

点开查看后面3条评论

Answer 3

ustbhuangyi 2021-07-14 14:51:56

清空 transform 的值就可以了吧

• 提问者 viTaemin_nanali #1

  我监听currentIndex值，当它的新值和旧值不同就触发transform重置，但是通过
  cdRef.value.style.transform = ''
  cdImageRef.value.style.transform = ''
  没用。

• 提问者 viTaemin_nanali #2

  我监听currentIndex当它值变化时就把动画的transform清空，但是没有效果
  const currentIndex = computed(() => store.state.currentIndex)
  watch(currentIndex, (newIndex, oldIndex) => {
      if (newIndex !== oldIndex) {
        resetCdAnimation(cdRef.value, cdImageRef.value)
      }
    })
   function resetCdAnimation(wrapper, inner) {
      wrapper.style.transform = ''
      inner.style.transform = ''
    }

• ustbhuangyi 回复 提问者 viTaemin_nanali #3

  你试试断点调试找找原因

点开查看后面2条评论