使用animation做一个音乐播放器循环旋转的效果

最新推荐文章于 2022-08-23 20:24:44 发布

原创最新推荐文章于 2022-08-23 20:24:44 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

19 篇文章

订阅专栏

 <img ref='mp3Img' src="../../assets/images/xxxxx.png" alt/>

       if (val.includes('mp3')) { 
          let _this = this
          // 如果是mp3格式添加animation动画
          _this.$refs.mp3Img.classList.add('img')
          this.$refs.audio.addEventListener('play', function () {
           // 如果开始播放添加animation-play-state=running 动画进行中
            _this.$refs.mp3Img.style['animation-play-state']='running'
          })
          this.$refs.audio.addEventListener('pause', function () {
          // 如果暂停播放添加animation-play-state=paused 动画暂停
            _this.$refs.mp3Img.style['animation-play-state']='paused'
          })
          this.$refs.audio.src = val
          return
        }
        // 如果不是mp3格式删除animation动画
        this.$refs.mp3Img.classList.remove('img')

 .img {
    z-index: 1;
    animation: rotateAlbumArt 3s linear 0s infinite;
    animation-play-state: paused;
  }

  @keyframes rotateAlbumArt {
    0% {
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0);
    }

    100% {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
  }