2

次のjQueryコードのスニペットを使用してAJAXリクエストを実行しています。

$.ajax({
    url: page,
    context: $(pageContent),
    beforeSend: function(){
        $(pageContent).css('opacity', '0');
    },
    success: function(html){
        $(pageContent).html(html);
    },
    complete: function(){
        $(pageContent).css('opacity', '1');
    }
});

また、不透明度の変化が0.25秒の間にフェードインおよびフェードアウトするようにCSS3トランジションを設定しました。望ましい結果は、（リンクをクリックした後）ページのセクションがフェードアウトし、次にコンテンツが置き換えられ、最後にセクションが再びフェードインする（新しいコンテンツが表示される）ことです。

問題は、フェードアウト遷移が完了する前に、コンテンツがAjax回答に置き換えられることです。

CSS3の移行が完了した後にのみAJAXリクエストを起動するにはどうしますか？

さまざまなスレッドを読んで、この解決策を検討しました。

box.addEventListener( 
     'transitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); // here I could launch my Ajax request
     }, false );

このようなものを使用して、フェードアウトが終了したときにのみajaxリクエストを起動できますが、次のようになります。

  • $ .ajaxメソッドの外側の最初の遷移を処理する必要があります（したがって、beforeSendメソッドを削除します）
  • 不透明度の遷移だけを聞く方法がわかりません
  • 現在、リンクのクリックによってトリガーされているため、ajaxリクエストがトランジションによってトリガーされることは私にはあまり意味がありません。

jQueryアニメーション関数も調べましたが、CSS3トランジションを使用していないようです。

どんな助けでも大歓迎です

4

3 に答える 3

-1

jquery animate のトランジションを破棄したい場合:

$(pageContent).animate({'opacity': '0'},250,
   function(){
      $.ajax({
          url: page,
          context: $(pageContent),
          success: function(html){
              $(pageContent).html(html);
          },
          complete: function(){
              $(pageContent).animate({'opacity': '1'},250);
          }
      });
   });

テストしていないので、構文が少しずれている場合は申し訳ありません。しかし、あなたにアイデアを与えます。ajax 呼び出しは、不透明度 0 へのアニメーション化が完了すると行われます。

于 2011-05-06T00:17:15.660 に答える
-1

css3-transitions でいくつかの css クラスを作成し、success/error/complete コールバックで .addClass/removeClass を使用します

http://css3.bradshawenterprises.com/transitions/ — トランジションは初期状態に関係なく受け入れられるため、完全に非同期で使用できます。

于 2011-08-16T01:54:14.393 に答える