CSS图片旋转/暂停后保持旋转状态(音乐播放常用)

html

      <div @click="()=>{noMusic=false;palyAudio()}" v-if="noMusic">
          <img src="../../assets/pic/activitiy/noMus.png" alt="" style="width: 
           30px;height:30px;border-radius: 30px;">
      </div>
      <div @click="palyAudio" v-if="!noMusic">
          <img src="../../assets/pic/activitiy/music.png" alt="" style="width: 
          30px;height:30px;border-radius: 30px;" :class=" 
          {'rot_img':plyMus,'pus_img':plyPus}">
      </div>

js

  data() {
    return {
      noMusic:true,// 是否显示静音图标
      playAdo:false,//判断音频是否是播放状态
      plyMus:false,//播放音频
      plyPus:false//暂停音频
    };
  },

    palyAudio(){   
      let buttonAudio = document.getElementById('eventAudio');
      if(!this.playAdo){
        buttonAudio.play();
        this.plyPus = false;
        this.plyMus = true;
        this.playAdo = !this.playAdo
      }else{
        buttonAudio.pause();
        this.plyPus = true;
        this.playAdo = !this.playAdo
      }
      
    },

css

.pus_img{
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
}
@keyframes rotation{

    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.rot_img{

    -webkit-transform: rotate(360deg);
    animation: rotation 7s linear infinite;
    -moz-animation: rotation 7s linear infinite;
    -webkit-animation: rotation 7s linear infinite;
    -o-animation: rotation 7s linear infinite;

}

然后呈现的效果是用户刚进入页面是静音

再点击这个静音标以后静音.png隐藏显示音乐.png,并触发旋转事件开始旋转

 

这样再点击音乐旋转标以后会停留在旋转位置 不会位置归0