1

私はどこでも検索しましたが、運がありませんでした。

私がやろうとしているのは、jQuery addClass を使用してトリガーされる CSS3 アニメーションを使用することです。jQuery ajax.load メソッドでコンテンツが入力されていないページでは問題なく動作しますが、ajax.load を使用すると、クラスの追加が行われているにもかかわらず、アニメーションが動作しません。

コード：

  $.fn.animateAjaxRequest = function() {

      // Variables
      $contentHolder = '#mainContent';

      // Bind to the click event
      $(this).click(function(e) {

          // Stop the click
          e.preventDefault();

          // Get and set some variables
          $destination = $(this).attr('href');
          $articleBreak = 0;

          // Fade out the old content
          $($contentHolder).fadeOut(600, function() {

              // Show loader

              // Get the new data
              $(this).load($destination+' '+$contentHolder+' > *', function() {

                  // Hide the loader

                  // Hide all the articles
                  $('article.whiteBox', this).removeClass('allIn').addClass('out');

                  // Fade this back in
                  $(this).fadeIn(600);

                  // Loop the articles and load them in one-by-one
                  $('article.whiteBox', this).each(function() {

                      // Increment the article break
                      $articleBreak += 300;

                      // Fade the article in
                      $(this).delay($articleBreak).queue(function(next){

                        $(this).removeClass('out').addClass('allIn');
                        next();
                      });

                  });
              });
          });

      });

CSS:

article.whiteBox {
    &.out {
        opacity: 0;
    }
    &.allOut {
      animation: whiteBoxAllOutAnime 1s;
      -webkit-animation: whiteBoxAllOutAnime 1s;

      animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;

      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
    }
    &.allIn {
      animation: whiteBoxAllInAnime 1.5s;
      -webkit-animation: whiteBoxAllInAnime 1.5s;

      animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;

      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
    }
}

これがなぜなのかについてのアイデアは、ありがたく受け取られます。私が言ったように、ajax.load を使用しない場合は問題なく、CSS3 アニメーションは問題なく動作しますが、そのままでは動作しません! 前もって感謝します

4

1 に答える 1

0

ご回答いただきありがとうございます。並べ替えました。ミックスインの 1 つに重複した行がありましたが、時間を割いて回答していただきありがとうございました。

于 2013-05-05T21:50:41.707 に答える