CSS3動畫旋轉方向 - 選擇框

Question

我想我的自定義選擇框給旋轉方向，即應該在完成一轉或完整的週期。如果打開，它應順時針方向順時針旋轉。

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

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

Answer 1

通過簡單的交替給你的jQuery腳本，您可以通過以下邏輯達到你想要的效果：

• img的默認狀態爲0輪轉
• On cl ick，應用增加180度旋轉的類open。
• 當再次點擊，另一類添加.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(){ 
 
     \t 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/