IOS animation-play-state 解决方案 #9

linweiwei123 · 2018-04-27T06:41:03Z

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .spin {
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: rotate-music 10s infinite linear;
        }
        .no-animation {
            -webkit-animation: none !important;
            -moz-animation: none !important;
            animation: none !important;
        }
        button {
            font-size: 32px;
        }
        @-webkit-keyframes rotate-music{
            0% {
                transform: rotate(0deg);
            }
            100% {transform: rotate(360deg);}
        }
    </style>
</head>
<body>
<h1 id="text" class="spin">text...</h1>
<button onclick="stop()">stop</button>
<button onclick="restart()">restart</button>

<script>
    function stop(){
        var textEl = document.querySelector('#text');
        document.querySelector('#text').style.transform = 'rotate('+ getRotate(document.getElementById('text')) +'deg)';
        change();
        textEl.classList.add('no-animation');
    }

    function restart(){
        document.querySelector('#text').classList.remove('no-animation');
    }

    function getRotate(el){
        var st = window.getComputedStyle(el, null);
        var tr = st.getPropertyValue("-webkit-transform") ||
            st.getPropertyValue("-moz-transform") ||
            st.getPropertyValue("-ms-transform") ||
            st.getPropertyValue("-o-transform") ||
            st.getPropertyValue("transform") ||
            "FAIL";
        var values = tr.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
        return angle;
    }

    function change(){
        var rule = document.styleSheets[0].cssRules[3];
        var deg = getRotate(document.getElementById('text'));
        var end = deg + 360;
        rule.deleteRule("0%");
        rule.deleteRule("100%");
        rule.appendRule("0% {  transform: rotate("+ deg + "deg);}");
        rule.appendRule("100% { transform: rotate("+ end + "deg);}");
    }
</script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IOS animation-play-state 解决方案 #9

IOS animation-play-state 解决方案 #9

linweiwei123 commented Apr 27, 2018 •

edited

Loading

IOS animation-play-state 解决方案 #9

IOS animation-play-state 解决方案 #9

Comments

linweiwei123 commented Apr 27, 2018 • edited Loading

linweiwei123 commented Apr 27, 2018 •

edited

Loading