IOS/微信音乐播放图片停止旋转动画没反应解决办法

遇到问题：停止动画样式在 IOS 微信自带浏览器中不起作用

    /* 停止动画 */
    -webkit-animation-play-state:paused!important;
    animation-play-state:paused!important;

解决办法：网上查找了资料解决办法有不同方式，然后我自己找了一个，如下代码块！

html代码：

<body>
<div id="Box">
    <img class="transformImg" id="BoxInfo" src="lib/img/playMusic.jpg"/>
</div>
</body>

css代码：

    <style>
        #Box{
            width:200px;height:200px;
        }
        #BoxInfo{
            width: 100%;height:100%;
            -webkit-border-radius:50% 50%;
            -moz-border-radius:50% 50%;
            border-radius:50% 50%;
        }
        .transformImg{
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 9s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 18s;
            -webkit-animation: rotate 18s linear infinite;
            -moz-animation: rotate 18s linear infinite;
            -o-animation: rotate 18s linear infinite;
            animation: rotate 18s linear infinite;
        }
        @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
            to{-webkit-transform: rotate(360deg)}
        }
        @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
            to{-moz-transform: rotate(359deg)}
        }
        @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
            to{-o-transform: rotate(359deg)}
        }
        @keyframes rotate{from{transform: rotate(0deg)}
            to{transform: rotate(359deg)}
        }
    </style>

js代码：

<script type="text/javascript">
    window.onload=function(){
        var oFlg = false;//开关控制器 方便后面点击是否暂停
        var oBox = document.getElementById('Box');//盒子
        var oImg = oBox.querySelector('img');//querySelector()返回匹配指定选择器的第一个元素
        oImg.addEventListener('click',function(){
            oFlg=!oFlg;//取反
            console.log(oFlg);
            oFlg?imgStop():imgPlay();
        });
        function imgStop(){/*停止旋转*/
            oBoxTransform = getComputedStyle(oImg).transform;//getComputedStyle()获取元素的css
            oImgTransform = getComputedStyle(oBox).transform;
            oBox.style.transform=oImgTransform==='none'
                                ?oBoxTransform
                                :oBoxTransform.concat(' ', oImgTransform);
            oImg.classList.remove('transformImg');//classList.remove 移除class
        }
        function imgPlay(){/*开始旋转*/
            oImg.classList.add('transformImg');//classList.add 添加class
        }
    }
</script>

全代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
        #Box{
            width:200px;height:200px;
        }
        #BoxInfo{
            width: 100%;height:100%;
            -webkit-border-radius:50% 50%;
            -moz-border-radius:50% 50%;
            border-radius:50% 50%;
        }
        .transformImg{
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 9s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 18s;
            -webkit-animation: rotate 18s linear infinite;
            -moz-animation: rotate 18s linear infinite;
            -o-animation: rotate 18s linear infinite;
            animation: rotate 18s linear infinite;
        }
        @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
            to{-webkit-transform: rotate(360deg)}
        }
        @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
            to{-moz-transform: rotate(359deg)}
        }
        @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
            to{-o-transform: rotate(359deg)}
        }
        @keyframes rotate{from{transform: rotate(0deg)}
            to{transform: rotate(359deg)}
        }
    </style>
</head>

<body>
<div id="Box">
    <img class="transformImg" id="BoxInfo" src="lib/img/playMusic.jpg"/>
</div>
</body>
<script type="text/javascript">
    window.onload=function(){
        var oFlg = false;//开关控制器 方便后面点击是否暂停
        var oBox = document.getElementById('Box');//盒子
        var oImg = oBox.querySelector('img');//querySelector()返回匹配指定选择器的第一个元素
        oImg.addEventListener('click',function(){
            oFlg=!oFlg;//取反
            console.log(oFlg);
            oFlg?imgStop():imgPlay();
        });
        function imgStop(){/*停止旋转*/
            oBoxTransform = getComputedStyle(oImg).transform;//getComputedStyle()获取元素的css
            oImgTransform = getComputedStyle(oBox).transform;
            oBox.style.transform=oImgTransform==='none'
                                ?oBoxTransform
                                :oBoxTransform.concat(' ', oImgTransform);
            oImg.classList.remove('transformImg');//classList.remove 移除class
        }
        function imgPlay(){/*开始旋转*/
            oImg.classList.add('transformImg');//classList.add 添加class
        }
    }
</script>
<html>

IOS/微信 音乐播放图片 停止旋转动画没反应 解决办法

猜你喜欢

IOS/微信音乐播放图片停止旋转动画没反应解决办法