avalon中如果通过js设置元素的多个style样式,则样式无法清除掉。

种花家的小小兔
  • 43

clipboard.png

上图中语音的长度和点击后自动播放的动画样式是通过js设置的。
点击后播放代码:

 var timerL = setInterval(
     function(){
        play.style.animation = "playLeftVoice 1s linear infinite";
             if(time==0){
                  clearInterval(timerL);
              }else{
                  time--;
              }
        },500);

语音长度控制代码:

if(element){
        if(len<3){
               element.style.width='63px';   
        }else{
                element.style.width=(63+len)+'px';
        }
          i++;
 }else{
   i++;
 }

这两个效果是两个函数分别实现的,先实现的语音播放功能,播放时测试动画可以正常运行与停止,后实现的控制语音长度,结果发现动画停止失效,点击语音之后图标动画一直在循环,检查代码发现play.style.animation = "playLeftVoice 1s linear infinite";这个样式一直存在,也尝试过不用定时器直接清除该样式,play.style.animation="",但是还是无效。
点击前的样式:

clipboard.png

点击后的样式(语音播放后还是这样,动画样式清除不了)

clipboard.png

回复
阅读 1.5k
1 个回答

同学。你计时器停了木有?计时器内部变量的引用分离了没有

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏