Вращение div с помощью javascript на указателе мыши и вращение их обратно в исходное положение при отпускании мыши

Question

Моя цель - заставить div вращаться, когда мышь входит в него, и поворачивать его обратно в исходное положение, когда мышь уходит.Это работает нормально, когда я взаимодействую только с одним div, но когда я пытаюсь навести курсор на другие div, он начинает глючить.

JS

$(document).ready(function(){

var blocks = document.getElementsByClassName('block-item');

for (var i = 0, max = blocks.length; i < max; i ++) {
    blocks[i].onmouseenter = blocks[i].onmouseleave = handler;
}

var startRotate = function(blackFrame, blackFrameAngle) {
// ...
};

var startRotateBack = function(blackFrame, blackFrameAngle) {
// ...
};

function handler(event) {

  // If mouse enters start rotating clock-wise
  if (event.type == 'mouseenter') {

        // Calculate angles
        var blackFrame = event.target.querySelectorAll('.block-frame')[0];
        var blackFramePos =         getComputedStyle(blackFrame).getPropertyValue('transform');
        var blackFrameValues = blackFramePos.split('(')[1],
        blackFrameValues = blackFrameValues.split(')')[0],
        blackFrameValues = blackFrameValues.split(',');
        var a = blackFrameValues[0];
        var b = blackFrameValues[1];
        var radians = Math.atan2(b, a);
        if ( radians < 0 ) {
            radians += (2 * Math.PI);
        }
        var blackFrameAngle = Math.round( radians * (180/Math.PI));

    // Start rotating
    startRotate(blackFrame, blackFrameAngle);

  }

  // If mouse leaves stop rotating clock-wise and start rotating back
  if (event.type == 'mouseleave') {

  clearInterval(RotateFrame)
  // ...
  // ...
  // Start rotating back
  startRotateBack(blackFrame, blackFrameAngle);

  }

}

});

Полный код в jsfiddle http://jsfiddle.net/fw3ma9ej/2/

Answer 1

Мы можем решить эту проблему, просто используя CSS-свойство перехода и изменив угол поворота элемента при наведении.

, вы можете увидеть пример здесь: http://jsfiddle.net/j10y98w2/1/

transform: rotate(45deg);
transition: transform 5s ease-out;
&:hover {
  transform: rotate(315deg);
}