css动画之间的平滑过渡

Question

我目前正在编码一个可扩展的盒子，并且在击败开关式悬停故障之后，我意识到存在一种特殊情况，在这种情况下，我无法让自己的行为以我想要的方式行事。

的代码可以发现如下： http://codepen.io/Sandypandy/pen/Fyuxf

与上述的情况：当我悬停时，它的封闭圈子，单击它并立即采取我的光标出去，再加上旋转了一下，然后大致跳直到想要的位置（当我将鼠标悬停在圆上时，单击它并将光标保持在内）工作得非常细腻。

我会非常感谢您的任何建议。 干杯， E.

Answer 1

下面是答案我敢肯定

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

基本上我删除了所有引用的CSS和JavaScript的“unhovered”状态......而在js的“click toggle”部分，我确保在“clicked”类切​​换之前，“hovered”类被删除。

我认为有太多不必要的属性彼此冲突。

故事的寓意是你并不总是需要在鼠标外出行为中定义一个特定的鼠标。 CSS Transition将有助于在原始状态和结束状态之间平滑过渡...并再次返回。