使用mouseenter上的javascript旋转div，并将其旋转回到mouseleave上的原始位置

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);
}