CSS3動畫旋轉方向-選擇框

Question

我想將旋轉方向賦予我的自定義選擇框，該框應完成1-TURN或完成循環。 如果打開，則應順時針旋轉，而再次順時針關閉。

這是我嘗試過的： http://codepen.io/iahmad/pen/qNvaQr : http://codepen.io/iahmad/pen/qNvaQr

方向永遠是這樣
http://image.flaticon.com/icons/png/128/120/120869.png

Answer 1

通過對jQuery腳本進行簡單的替換，您可以通過以下邏輯實現所需的效果：

• img的默認狀態為0旋轉
• 單擊時，將類應用為open ，它將增加180度的旋轉。
• 再次單擊時，將添加另一個類.turn ，以將旋轉周期完成到360度。
• 當turn完成過渡時（1秒后），我們將刪除所有類以將旋轉恢復為0，但是從360過渡到0會出現問題，因此為避免這種情況，我們暫時禁用了過渡並在下次單擊時再次將其還原。

演示：

 $(function(){ $('a').on('click', function(){ var el = $(this); if (!el.hasClass('open')) { el.children('img').attr('style',''); el.addClass('open'); } else { el.removeClass('open').addClass('turn'); setTimeout(function(){ el.children('img').attr('style','transition: none'); el.removeClass('turn'); }, 1000); } }); }); 

 a img { transition: all 1s ease; } a.open img { transform: rotate(180deg); } a.turn img { transform: rotate(360deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#"><img src="http://image.flaticon.com/icons/png/128/118/118738.png"></a> 

jsFiddle： https ://jsfiddle.net/azizn/zcnatgxq/