jQuery方向感知悬停与CSS3过渡

Question

我正在努力让方向感知悬停和css转换正常工作.基本上我正在尝试使用具有正面和背面的元素网格,并且当悬停时具有css过渡以翻转该元素以显示背面.

转换示例(没有方向感知):小提琴

正如您所看到的,无论您的鼠标以哪种方式进入元素,它总是会翻转.我想让它以鼠标进/出的方式翻转.

例:

这是我对方向感知的尝试:小提琴

我正在使用jQuery添加与鼠标进/出方向相关的类.

.hover-in-top {}
.hover-in-right {}
.hover-in-bottom {}
.hover-in-left {}

.hover-out-top {}
.hover-out-right {}
.hover-out-bottom {}
.hover-out-left {}

正如你从方向感知的例子中看到的那样,它有点有用,但是有一些重大的故障我无法理解.(我一直在思考这个,我的大脑刚刚崩溃.)

无论如何,我希望这是有道理的.谢谢.

Answer 1

我相信解决这个问题的最好方法是不使用 CSS 过渡。

您可以使用 jQuery 轻松实现它animate，利用 jQuery 动画队列来保持所有动画同步。

我修改了您的示例以在 JavaScript 中为过渡添加动画效果。

代码示例