停止javascript div旋转

Question

This is a script that makes a div rotating.. Now I'm trying to make only one rotation and stop the script.. can you help me? 这是一个使div旋转的脚本。.现在，我尝试仅使一个旋转并停止该脚本..您能帮我吗？ How can I stop this script to only one rotation? 如何才能将此脚本停止仅旋转一周？ I'm new to this programming language.. D: 我是这种编程语言的新手。D：

<body style="-webkit-transform: rotate(0deg);">
    <div id="wrap">
        <p>some content</p>
        <script type="text/JavaScript">
            function getTransformProperty(element) {
                var properties = ['transform', 'msTransform', 'WebkitTransform', 'MozTransform' , 'OTransform'];
                var p;
                while (p = properties.shift()) {
                    if (typeof element.style[p] != 'undefined') {
                        return p;
                    }
                }
                return false;
            }
            var div = document.getElementById('wrap');
            var property = getTransformProperty(div);
            if (property) {
                var d = 0;
                setInterval(function () {div.style[property] = 'rotate(' + (d++ % 360) + 'deg)';}, 10);
            }
        </script>
    </div>

Answer 1

Sure, you can do it by clearing the interval . 当然，您可以清除interval 。

if (property) {
    var d = 0;
    interval = setInterval(function () {
       d++;
       div.style[property] = 'rotate(' + (d % 360) + 'deg)';
       if (d == 360) clearInterval(interval); // clearInterval if 360deg reached.. 
    }, 10);
}

Answer 2

Your approach isn't ideal. 您的方法并不理想。 Your best bet would be to use a CSS class transition, like so: 最好的选择是使用CSS类过渡，如下所示：

 //setTimeout is merely for delaying the effect for display purposes setTimeout(function(){ document.getElementById("wrap").classList.add("rotate"); }, 1000);

 #wrap { -webkit-transition: -webkit-transform 1s; transition: transform 1s; } #wrap.rotate { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

 <div id="wrap"> <p>some content</p> </div>

Much less code! 更少的代码！

停止javascript div旋转

问题描述

2 个解决方案

解决方案1
0 2015-09-12 21:35:46

解决方案2
0 2015-09-12 21:36:32

停止javascript div旋转

问题描述

2 个解决方案

解决方案1 0 2015-09-12 21:35:46

解决方案2 0 2015-09-12 21:36:32

解决方案1
0 2015-09-12 21:35:46

解决方案2
0 2015-09-12 21:36:32