クリックしたときに、私は要素にCSSトランジションを挿入するには、次のjQueryを使用していますクリック

Question

に複数回出現...

$(".menu-item-4828 > a").click(function(){ 
    $(".sub-menu").css("visibility", "visible"); 
    $(this).css({ 
     "-webkit-transform": "rotate(180deg) scale(0)", 
     "-moz-transform": "rotate(180deg) scale(0)", 
     "transform": "rotate(180deg) scale(0)", 
     "-webkit-transition": "-webkit-transform 0.3s ease-in", 
    }); 

しかしこれは、それがクリックされた最初の時間を回転させますその後、それはもはや回転しません。要素をクリックするたびに回転するようにするにはどうすればよいですか？

クラスを追加して削除しようとしましたが、これは機能しませんでした。

Answer 1

問題は180度回転するのではなく180度回転しているように見えます。クリックするたびに、それを回転180°に設定します。あなたはそれが現在の回転であることを知り、180を加えて、それを新しい値に設定する必要があります。

Answer 2

回転位置を復元してください。あなたのケースでは、多分（スタイル属性を除去するため）そのように大丈夫です：

$(".menu-item-4828 > a").click(function(){ 
     $(".sub-menu").css("visibility", "visible"); 
     $(this).removeAttr('style').css({ 
      "-webkit-transform": "rotate(180deg) scale(0)", 
      "-moz-transform": "rotate(180deg) scale(0)", 
      "transform": "rotate(180deg) scale(0)", 
      "-webkit-transition": "-webkit-transform 0.3s ease-in", 
     }); 
    )}; 

幸運:)