3

cssトランジションを使用してjquerymobileの折りたたみ可能なコンテンツをアニメーションで表示するにはどうすればよいですか？

.ui-collapsible {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

動作していません。

4

3 に答える 3

3

display: nonejQuery Mobile の折りたたみ可能な要素は、折りたたみ可能なコンテンツの div を切り替えることで表示および非表示になります。私の知る限り、すべての主要なブラウザーは、displayプロパティが変更されると CSS トランジションを無効にします。

別の方法として、jQuery Mobile のデフォルトの CSS をオーバーライドして、折りたたみ可能なコンテンツ div に常に使用し、 orプロパティdisplay: blockでトランジションします (コンテンツをレイアウトから「削除」する必要があるかどうかによって異なります)。heightopacity

プロパティを使用した遷移を示すために、このjsFiddleを作成しましたopacity。実際には、次の CSS ルールを使用するだけの問題です。

.ui-collapsible-content {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
}
.ui-collapsible-content-collapsed {
    display: block;
    opacity: 0
}

コンテンツ div には高さが設定されていないため、プロパティを使用したトランジションheightは少しトリッキーです。このフィドルはうまく機能しますが (以下の CSS も参照)、コンテンツ div に高さを設定する必要があります。高さを に変更できますがauto、私の意見では、スライド ダウン効果は正しく見えません。おそらく、他の誰かがより良い方法を知っているでしょう。

.ui-collapsible-content {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    height: 2em; /* or auto */
    overflow: hidden;
}
.ui-collapsible-content-collapsed {
    display: block;
    height: 0;
    padding: 0 16px;
}
于 2012-07-14T10:25:15.557 に答える
1 
.ui-collapsible-content {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
}
.ui-collapsible-content-collapsed {
    display: block;
    opacity: 0
}
于 2012-07-14T11:57:22.107 に答える
0

カスタムCSSベースのトランジションを作成する必要があると思います:-

これを参照

于 2012-07-14T10:15:19.940 に答える