css动画之间的平稳过渡

Question

我目前正在编码一个可扩展的框，在克服了关闭的悬停故障之后，我意识到有一种特殊的情况，在这种情况下，我无法得到我想要的行为方式。

代码可以在下面找到：http://codepen.io/Sandypandy/pen/Fyuxf

上述情况:当我在圆圈上悬停时，点击它并立即取出光标，加号旋转一点，然后大致跳到想要的位置(虽然当我悬停在圆圈上，点击它并保持光标在里面时，效果非常好和平滑)。

如有任何建议，我将不胜感激。干杯，E.

Answer 1

这是我很确定的答案

http://codepen.io/anon/pen/DzFyr

基本上，我删除了css和javascript中对"unhovered“状态的所有引用.在js的“点击切换”部分，我确保在切换“单击”类之前删除“悬浮”类。

我认为有太多不必要的属性相互冲突。

这个故事的寓意是，你并不总是需要在鼠标退出行为中定义一个特定的鼠标。CSS转换将有助于在原始状态和结束状态之间的平稳转换。然后又回来了。