0

私はphonegapを使用してiPadアプリを作成しています。これに関連して、css3アニメーションで簡単に役立つjquery.transitを気に入っています。

しかし、私は障害に遭遇しました。ログイン時に新しいユーザーを追加するオンラインリストを作成しています。ページのスクロール中にDOM要素を追加しても問題ありませんが、要素を「展開」するためにcss3アニメーションを追加すると、アニメーションはスクロールしない場合にのみ機能します。結果として、高さの要素：0; 希望の高さを生成しません：56px; その上でアニメーションを実行するとき。

- - 編集 - -

この問題は、アニメーションを実行しているdiv以外のdivでのスクロールに関連しているようです。friendList（オーバーフロー自動で修正されています）を含むdivをスクロールすると、スクロール中に正常に機能します。これは、実際のページをスクロールするときにのみ問題になり、iOSネイティブのスクロールが開始されます。

- - 編集 - -

コードは次のようになります。

<ul class="friendList">
  <li class="friendElement">
     <div class="friendWrapper">
     (content here)
     </div>
  </li>
</ul>

どこ

.friendWrapper.entering{
   height:0;
}

友達のログイン時：

var $friendTemplate = (... appropriate template goes here ...);

function friendLogsOn(){
   var $newFriend = $friendTemplate.clone(),
   $friendList = $(".friendList"),
   nmbElements = $friendList.children().length,
   rand = Math.floor(Math.random()*nmbElements);
   $newFriend.find(".friendWrapper").addClass("entering");
   $newFriend.insertAfter($friendList.children().eq(rand));
   $newFriend.find(".friendWrapper").transition({ height: '56px' },function(){
      $(this).removeClass("entering");
   });
}

ユーザーがスクロールしているときにjquery.transitionでアニメーションをアクティブ化することができませんでしたが、同様の経験をしている人はいますか？

4

1 に答える 1

0

iOS はスクロールの開始時にページ全体をレンダリングするため、通常のページ スクロール中にアニメーション化することはできません。

これは、パフォーマンスを向上させるために行われます。他のスマートフォンやテーブルも同じことをします。

iScroll4 のようなプラグインを使用して結果を得ることができます。iScroll は通常のスクロールを行いませんが、マウス/タッチ イベントをリッスンし、要素を移動してスクロールをシミュレートします。 http://cubiq.org/iscroll-4

スクロール時にアニメーションが停止するかどうかをテストしたい場合は、試してみることができる簡単な jsfiddle を作成しました。(iPad、iPhone、Android デバイスなど) http://jsfiddle.net/3ntKM/4/embedded/result/

<style>
    #square {
        width: 200px;
        height: 200px;
        margin: auto;
        background: red;
        -webkit-animation: rotate 4s infinite linear;
    }
    @-webkit-keyframes rotate {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
</style>
<div id="square"></div>
于 2013-09-17T09:20:29.480 に答える