Javascript 方向感知三维立方体动画

我使用此方向功能构建了一些具有方向感知的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;};

参见小提琴：

我遇到的问题是，不管“入”动画是否完成，“出”动画都会开始

所以我需要一种在mouseout上等待mousein动画首先完成的方法，我假设使用动画排队之类的方法

有什么想法吗

---

提前谢谢。

也许你可以听听

 transitionEnd

事件

这样帖子就可以正常化了

---

我设法解决了这个问题，我只使用了活动类和动画类

鼠标悬停可添加活动类/方向属性。 鼠标移动可删除活动类/方向属性

如果对象在悬停关闭/打开时具有动画类，则返回false，如果对象在动画完成播放关闭动画时没有活动类

谢谢你的帮助

我只是用CSS做的：