移动端使用js绑定事件控制图片的旋转

Question

我用了css3 的animation 让图片360deg循环旋转 在页面刚进来的时候一直是旋转的 我给这图片绑定一个触摸点击事件 当点击图片的时候会停止旋转 再点的时候又开始旋转 这个怎么实现呢

<div class="item item-1">
    <div class="music-pic">
        <img src="./images/musicButtom.png" alt="" id="routate-pic"></div>
    </div>
</div>

 .wrap .item-1 .music-pic img {
    display: block;
    width: 80%;
    animation: Routate 3s linear infinite;
    -webkit-animation: Routate 3s linear infinite;
    transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}
@keyframes Routate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes Routate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

\\ 获取img
var routtePic = document.getElementById('routate-pic');

Answer 1

首先将anmation的样式类抽出来

.rotate {
    animation: Routate 3s linear infinite;
}

// 绑定点击事件

var img = doucument.getElementById('img');
img.onclick = function() {
  var cm = img.className || ''; 
  if (cm.indexOf('rotate') > -1) {
    img.className = cm.split('rotate').join(' '); // 删除动画类
  } else {
    img.className = cm + ' rotate'; // 添加类
  }
}

Answer 2

旋转写在单独的类名里，点击判断classList里是否有这个类：有则减之，无则加之。