方向感知三维立体动画

Question

我已经构建了一些三维立方体悬停动画，它们可以感知方向，使用这个方向函数：

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

我的问题是‘输出’动画开始于'in‘动画是否已经完成。

所以我需要一种在鼠标上等待mousein动画完成的方法，我假设使用动画排队或什么的。

有什么想法吗？

提前谢谢。

Answer 1

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

鼠标在添加活动类/方向攻击。鼠标移除活动类/方向攻击。

如果对象在悬停/返回false时具有动画类，则如果对象在动画结束时没有活动类，则为关闭动画。

谢谢你的帮助！

Answer 2

也许你可以听听

 transitionEnd

活动？

这样的话，post就可以得到规范化的

如何规范跨浏览器的CSS3转换函数？