Question

我到处搜索，没有运气。

我要做的是使用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动画工作正常，但有了，它显然不起作用！提前致谢

Answer 1

感谢所有人的回复，我已对其进行了排序，其中一个mixin中有一条重复的行，感谢您抽出时间作出回应。

使用ajax.load加载页面内容后，由jquery.addClass触发的CSS动画将无法正常工作

1 个答案: