Question

每次点击它时，我都试图通过javascript / css3旋转一个框。它有效，但只是我第一次点击它。每次之后，我都会收到警报，这意味着它不是javascript错误 - 但没有动画。

这是我的简单页面 -

<script>
  function rotate( box )
  {
    alert('start');
    box.style.webkitTransform = 'rotate(360deg)';
  }
</script>

<style>
#box{ height:100px; width:100px; border:1px solid red; -webkit-transition: -webkit-transform 1s ease-out; }
</style>

<div id='box' onclick='rotate(this);'></div>

我认为需要在rotate（）之后放置一些东西，告诉它返回到开始阶段，以便它可以再次旋转360。

Answer 1

我重复使用我之前制作的脚本。它现在也应该支持Mozilla。

<!-- head part -->
<script type="text/javascript">
var angle   = 0;    //Current rotation angle 
var nbSteps = 30;   //More steps is more fluid
var speed   = 1000; //Time to make one rotation (ms)
var count   = 0;    //Count the nb of movement (0..nbSteps-1)
var element = null;

/**
 * Rotate the element passed
 */
function rotate(box) {
    if(count == 0) {
        element = box;
        rotateLoop();
    }
}

/**
 * Recursive method that rotate step by step
 */
function rotateLoop() {
    angle-=360/nbSteps;

    setElementAngle(angle);
    count++;

    if(count < nbSteps) {
        setTimeout("rotateLoop()",speed/nbSteps);
    }
    else {
        count=0;
        setElementAngle(0); //Just to be sure
    }
}

/**
 * Use for the rotation
 */
function setElementAngle(angle) {
    var rotationStyle = "rotate(" + (360-angle) + "deg)";
    element.style.WebkitTransform = rotationStyle;
    element.style.MozTransform = rotationStyle;
    element.style.OTransform = rotationStyle;
}
</script>

<style>
#box{
    height:100px;
    width:100px; 
    border:1px solid red;
    }
</style>

<!-- body part -->
<div id='box' onclick="rotate(this);"></div>

Answer 2

编辑：假设您希望它完全是CSS：

目前正在测试Webkit转换并且非常粗糙。特别是对于你想做的事情。由于这些是“转换”，并且样式字符串非常复杂，因此会产生令人讨厌的挑战。

最好的做法是每隔一次点击反转一次旋转：

<script>
function rotate( box )
{
  box.style.webkitTransform = box.style.webkitTransform == "rotate(360deg)" ? "rotate(0deg)" : "rotate(360deg)";
}
</script>

<style>
#box{ height:100px; width:100px; border:1px solid red; -webkit-transition: -webkit-transform 1s ease-out; }
</style>

<div id='box' onclick='rotate(this);'></div>

或者你必须处理很多危险的编码或javascript替代品。

css3动画只发生过一次

2 个答案: