方向感知3D魔方動畫

Question

我已經建立了一些3D立方體懸停動畫分別是左右方向知道，使用這種導向作用：

var getDirection = function (ev, obj) { 
var w = obj.offsetWidth, 
    h = obj.offsetHeight, 
    x = (ev.pageX - obj.offsetLeft - (w/2) * (w > h ? (h/w) : 1)), 
    y = (ev.pageY - obj.offsetTop - (h/2) * (h > w ? (w/h) : 1)), 
    d = Math.round(Math.atan2(y, x)/1.57079633 + 5) % 4; 

return d;}; 

看到小提琴： JSFidde

我遇到的問題是， 'out'動畫開始於'in'動畫完成或不完成。

所以我需要一個在mouseout等待mousein動畫完成的方式，我假設使用動畫排隊或其他。

任何想法？

在此先感謝。

Answer 1

我設法搞清楚，我只是用積極和動畫類。

鼠標上添加活動類/方向attr。 鼠標刪除活動類/方向attr。

如果對象在懸停/返回時有動畫類，則返回false，如果動畫完成後對象沒有活動類播放關閉動畫。

感謝您的幫助壽！

Answer 2

或許你可以聽聽

transitionEnd 

事件？

這個SO後可以得到規範化

How do I normalize CSS3 Transition functions across browsers?