由jquery.addClass触发的CSS动画在使用ajax.load加载页面内容后不起作用

Question

我到处找都找不到。

我想做的是使用CSS3动画触发使用jQuery的addClass。它在没有使用jQuery ajax填充内容的页面上运行良好。加载方法，但当我使用ajax。加载动画不工作，尽管添加了类。

代码:

  $.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时。加载它的fine和CSS3动画工作正常，但与，它显然不工作!提前感谢

Answer 1

感谢您的回复，我已经对它进行了排序，其中一个mixins中有重复的行，感谢您花时间回复。