css动画之间的平滑过渡

Question

我目前正在为一个可扩展的盒子编码，在击败了开 - 关 - 悬停故障后，我意识到在某种特殊情况下我无法按照我想要的方式行事。

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

上述情况：当我将光盘悬停在圆圈上时，单击它并立即将光标移出，加号旋转一点然后大致直接跳到所需位置（尽管工作完全精细和平滑当我将鼠标悬停在圆圈上时，单击它并将光标保持在内部）。

我会非常感谢任何建议。 干杯， 即

Answer 1

这是我非常肯定的答案

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

基本上我删除了对css和javascript中“unhovered”状态的所有引用...并且在你的js的“click toggle”部分中，我确保在“之前”删除了“hovered”类。点击“班级切换。

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

故事的寓意是你不总是需要在鼠标移出行为中定义一个特定的鼠标。 CSS Transition将帮助在原始状态和最终状态之间平滑过渡......然后再返回。