jQueryを使用して上下に回転

Question

単純なドロップダウンメニューがあり、三角（キャレット）記号で開きます。メニューを開いたときにキャレットを上下逆に（180度）回転させ、閉じたときに元の位置に戻す必要があります。理想的なのは、私が答えを探していたときに、最も一般的に提案されている解決策であるcssクラスに関与することなくこれを達成することです。

私はこのように、クリックで三項演算子を使用しようとしました：

$(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)'); 

しかし、それは動作しません。それは1回上下逆に回転しますが、次のクリックではデフォルト位置に戻りません。私は「回転（0度）」と「回転（360度）」、同じ効果（実際には効果なし）を試してみました。代わりにどのような声明を使うべきですか？

Answer 1

は...回転ではありません。

だけ回転していない切り替える必要があるため、あなたはからテストを変更することができますに

$(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)'); 

：

$(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(20deg)' : 'none'); 

例：

$('p').on('click', function(e) { 
 
    console.log($(this).css('transform')); 
 
    $(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(180deg)' : 'none'); 
 
})

p { 
 
    border: solid red; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<p>Transformed element</p>

を

Answer 2

ここでの回答のように試してください。jQuery toggle CSS? Jqueryの切り替えを使用してください。なぜCSSクラスを避けているのか分かりませんが、それは非常に簡単になります。

Answer 3

css（ 'transform'）には独自のタイムラインがあります。最初の時間は、それはタイムラインの終わりに達した。タイムラインを再開することは期待できません。

私が知っていることは、「ハッピーではなく」ということです。ステートメントにタイムアウトを追加してください。タイムアウトが開始されたとき（タイマーが0msでも）、CSSはリフレッシュし、もう一度CSSプロパティの2回目の変更を行います。

これが、JSでCSSクラスを追加する理由です。なぜならあなたはcssクラスを追加したり削除したりするからです。ブラウザを再レンダリングするだけで、そのCSSプロパティのタイムラインがリセットされます。 の値が transformプロパティをdocumentationで説明したように