javascript - 如何在悬停时将元素旋转 180 度超过 150 毫秒？

Question

鼠标悬停时，我需要在 150 毫秒的时间间隔内将元素逆时针旋转 180˚，然后在鼠标移开时，我需要在 150 毫秒内将元素逆时针旋转回原来的 0˚。

我愿意使用 CSS3、jQuery 和 JavaScript。

我使用 Chrome，但我还需要让它适用于 Firefox 和 Safari。不太担心 IE。

Answer 1

使用 CSS3 transform、transition 和 Javascript 添加/删除类。

演示:http://jsfiddle.net/ThinkingStiff/AEeWm/

HTML:

<div id="rotate">hover me</div>

CSS:

#rotate {
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

.over {
    transform: rotate( -180deg );            
    transition: transform 150ms ease;
}

.out {
    transform: rotate( -360deg );            
    transition: transform 150ms ease;
}
​

脚本:

var rotate = document.getElementById( 'rotate' );

rotate.addEventListener( 'mouseover', function () {

    this.className = 'over';

}, false );

rotate.addEventListener( 'mouseout', function () {

    var rotate = this;

    rotate.className = 'out';
    window.setTimeout( function () { rotate.className = '' }, 150 );

}, false );

​