方向感知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'动画完成之后开始的。

所以我需要一种鼠标输出等待鼠标动画首先完成的方法，我假设使用动画排队等等。

任何想法？

提前致谢。

Answer 1

也许你可以听

 transitionEnd

事件？

这个SO帖子可以得到规范化的

How do I normalize CSS3 Transition functions across browsers?

Answer 2

我设法弄清楚了，我只是使用了活动和动画类。

鼠标开启会添加活动的类/方向attr。 鼠标移除活动类/方向attr。

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

感谢您的帮助！