2
jQuery Mobileの標準アイコンを使用して折り畳みが折りたたまれたり、展開されたときにすばらしい回転アニメーションを得ようとしましたが、奇妙な結果が表示された場合、見出しの折りたたみタイトル全体が回転します。jQuery Mobile折りたたみ見出しのアイコンをアニメーション化する方法は？
私の理想的なソリューションでは、あらかじめ定義されたjQMアイコンクラスを使用するだけで、その目的のためだけに追加のスタイルを追加する必要はありません。
例：icon-carat-uとicon-carat-dは180度回転しているため、折りたたみが展開されて折りたたまれているときにアニメーション化されています。
さらに、コードcollapsible("expand")またはcollapsible("collapse")で使用しているときに折りたたみアイコンがアニメーション化されるため、clickイベントを使用しないようにしてください。ここで
は私のコードです：
.ui-icon-carat-d {
transform: rotate(-180deg);
transition: .3s;
}
.ui-icon-carat-u {
transform: rotate(0deg);
transition: .3s;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
<h4>Heading</h4>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
</div>
</div>
</body>
</html>私はjQueryのモバイル折りたたみ可能な見出しにすてきな滑らかなアニメーションを取得するために、標準カラットアイコンを回転させることができますどのように？
私は実際にこのCSS .'ui-アイコンカラット-Dを使用しています:: 変換{後：回転（-180deg）。 移行：.5s; } .ui-icon-carat-u :: after { 変換：回転（180度）; 移行：.5s; } 'それはうまく回転していますが、私はCSS変換とトランジションの新しさだから、なぜ半回転だけ回転させることができないのかまだ理解できません。私はあなたの文章を完全に理解するために、このトピックを深くする必要があると信じています。「ブラウザーは確かに2つの別々の無関係のアイコンの間に巧妙なアニメーションを作れません。私のせい。それについての示唆？ – deblocker
@deblocker私はあなたのコメントごとに半円回転をするように自分のコードを調整しました。デフォルトjQuery Mobileスタイルでそうすることができない理由は、CSSを介してキャレットが回転していないということです。アイコンは別の画像に置き換えられています。残念なことに、CSSでは2つの背景画像の間で遷移する方法はないので、私の例では、画像を強制的に最初の通常のキャレットに残しています。 –