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將有助於在原始狀態和結束狀態之間平滑過渡...並再次返回。