css3 анимация происходит только один раз

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

Редактировать: если вы хотите, чтобы это был полностью 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.

Answer 2

Я повторно использую скрипт, который я сделал ранее.Теперь он также должен поддерживать 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>