css - css动画之间的平滑过渡

Question

我目前正在编写一个可扩展框，在解决了悬停时出现的故障后，我意识到在一种特殊情况下我无法让我的 plus 以我想要的方式运行。

代码如下: http://codepen.io/Sandypandy/pen/Fyuxf

上述情况:当我将鼠标悬停在关闭的圆上时，单击它并立即将光标移出，加号会旋转一点然后大致直接跳到所需位置(尽管当我将鼠标悬停在圈，单击它并将光标保持在里面)。

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

Answer 1

这是我很确定的答案

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

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

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

这个故事的寓意是您并不总是需要定义特定的鼠标移入鼠标行为。 CSS Transition 将有助于在原始状态和结束状态之间顺利过渡……并再次返回。