0

画面の下部からスライドしてビューポートを覆う単純なスライド パネルを作成しようとしています。次に、AJAX を介してそのパネルにコンテンツを読み込みます。

パネル要素を height:0 に設定し、絶対にビューポートの下部に配置し、css3 トランジションを適用して、高さをビューポートの高さに設定し、アニメーションをトリガーします。

残念ながら、アニメーションは非常に遅く、受け入れられないほど遅れています。

パネルに次の CSS を適用しています。

-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-property: height;

コンテンツの量が影響しているようです。それともコンテンツの種類ですか？わからない。私は間違っているかもしれませんが、AJAX が問題を引き起こしているとは思いません。

何か案は？

乾杯。

4

1 に答える 1

1

この遅さは、ブラウザが新しい高さに適応するためにテキストを再ラップしなければならないという事実に確かに関係しています。高さではなく、位置または移動をアニメーション化してみてください。

ここに簡単なプロトタイプがあります: http://jsfiddle.net/6gdGr/

スライドのちらつきの問題が発生する可能性があります。stackoverflow で簡単に答えを見つけることができます。これには、コンテキストに応じて、1. 背面の可視性を非表示にするか、2. -webkit-translate3d を使用します。

于 2010-12-02T05:11:56.673 に答える