jQuery方向感知悬停与CSS3过渡

I am struggling to get direction-aware hover and css transitions to work properly. Basically I am trying to have a grid of elements with a front and back face, and when on hover have a css transition to flip that element to show the back face.

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

Transition example (without direction-aware): fiddle

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

As you can see, no matter which way your mouse enters an element it always flips up. I want it to flip whichever way the mouse enters in/out.

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

Example:

And here is my attempt with direction-aware: fiddle

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

I am using jQuery to add classes relevant to the mouse in/out direction.

我正在使用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 {}

As you can see from the direction-aware example it kind of works but there are major glitches which I can't get my head round. (I've been overthinking this and my brain has just imploded.)

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

Anyway I hope this makes sense. Thanks.

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

2 个解决方案

#1

I believe that the best way to approach the problem is not to use CSS transitions.

我认为解决问题的最佳方法是不使用CSS转换。

You can easily implement it using jQuery's animate, utilizing jQuery animations queue to keep all of your animations synced.

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

I modified your example to animate the transition in JavaScript.

我修改了您的示例以动画JavaScript中的过渡。

Code example

2 个解决方案

#1

更多相关文章

随机推荐