在鼠标输入时使用 javascript 旋转 div，并在鼠标离开时将它们旋转回原始位置

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