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

感谢大家的回复，我已经对其进行了排序，其中一个 mixin 中有重复的行，不过感谢您抽出时间回复。

于 2013-05-05T21:50:41.707 回答