在悬停出口处连续旋转 [英] Continuous rotation on hover exit

问题描述

请考虑以下小提示： http://jsfiddle.net/a7EVf/5/ p>

悬停时，可以使div旋转（有效地旋转360度，而不是0），而不是逆时针旋转？

如果可能，我宁愿不使用JavaScript（包括jQuery） - 我意识到这很简单，可以设置

  transform：rotate（360deg）; / *还使用JS的原始版本上的供应商特定版本* / 
  

解决方案

使用CSS3动画，我们可以使用CSS3动画可以使块在悬停时从0旋转到180度，然后在不悬停时从180旋转到360度。

  #block {position：绝对; width：100px; height：50px; left：100px; top：100px;背景：黑色;颜色：白色; animation-name：out; / *动画在悬停时旋转* / animation-duration：1s; / *动画的持续时间，增加它减慢它* /}＃block：hover {animation-name：in; / *动画旋转悬停* / animation-duration：1s;} @关键帧在{from {transform：rotate（0deg）; }到{transform：rotate（180deg）; }} @ keyframes out {from {transform：rotate（180deg）; }到{transform：rotate（360deg）; }}  

 < script src =https：// cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js\"> ;</script> ;<div id =block>< / div>  
 

---

注意：

1. 这会导致块在页面加载时轮播。除了使用JS，并且对页面加载的效果无效之外，没有其他解决方案。


2. 如前所述，当我们以非常快的间隔悬停和退出时，有一点咬合。这可以通过查看答案来解释这里和此处。一旦动画不再适用（即选择器不再适用），动画将突然停止，并返回其原始未转换的位置。

Consider the following fiddle: http://jsfiddle.net/a7EVf/5/

Is it possible to have the div rotate through (effectively to 360 degrees instead of 0) on hover out instead of moving back counterclockwise?

I would rather NOT use JavaScript (including jQuery) if possible - I realize it would be simple enough to set

transform: rotate(360deg); /*also the vendor-specific versions*/

on the original using JS (and once it reaches 360 reset it to 0 without a transition), but is it possible to do this only using CSS3?

解决方案

Using CSS3 animation, we can make the block rotate from 0 to 180 degree on hover and then rotate from 180 to 360 degree when not hovered.

#block {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 100px;
  top: 100px;
  background: black;
  color: white;
  animation-name: out;  /* animation to rotate on hover out*/
  animation-duration: 1s;  /* duration for the animation, increase it to slow it down*/
}
#block:hover {
  animation-name: in;  /* animation to rotate on hover */
  animation-duration: 1s;
}
@keyframes in {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes out {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="block"></div>

---

Note:

1. This causes the block to rotate on page load also. There is no solution for this other than using JS and nullify the effect on page load.
2. As you mentioned, there is a bit of snapping when we hover in and out at very quick intervals. This can be explained by having a look at the answers here and here. Once the animation is no longer applicable (that is, the selector is no longer applicable), the animation will abruptly stop and return back to its original un-transformed position.

这篇关于在悬停出口处连续旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！