CSS动画一个接一个地应用于元素？

Question

我正在尝试在我的项目中使用 CSS 动画。

一切正常。但是，当我运行我的代码时，CSS 动画会同时应用于类 .allPro 的所有元素。

有没有办法单独应用 CSS 动画？

例如，让第一个元素出现，然后是第二个，然后是第三个，以此类推？

这是我在FIDDLE上的代码

这是我的 CSS 代码：

.allPro {
  width:150px;
  height:150px;
  float:left;
  margin:5px;
  background-color:#000;
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

元素是动态创建的。所以我无法预测页面上有多少元素。

我愿意使用 jQuery 来实现我想要做的事情。

编辑：

这就是我如何在页面上动态创建元素并将它们附加到容器中：

$(document).ready(function() {
  var poutput = $('.dotted-list');
  $.ajax({
    url: 'https://mydonain.com/page.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status) {
      $.each(data, function(pi, item) {
        str = item.name;
        if (str.length > 2) str = str.substring(0, 2)
        var products = '<a class="allPro" data-id="' + item.id + '" data-name="' + item.name + '" data-type="' + item.type + '" href="" data-transition="slidefade">' + '<div class="products-feed-Small">' + '<div style="position:absolute; top:40%; text-align:center; width:100%; color:#fff; font-family:Walpurga; font-size:28px; font-weight:bold; text-decoration: none;">' + item.name + '</div>'

        +'<img src="62.jpg" >' + '</div>' + '</a>';
        poutput.append(products);
        $('.allPro').each(function() {
          var delay = $(this).index();
          $(this).css('animation-delay', delay + 's');
        });
        //$( "#load-more" ).show();
      });
    },
    error: function() {
      poutput.text('There was an error loading the data.');
    }
  });
});

Answer 1

使用 jQuery（或 JavaScript）执行此操作的一种方法是找到元素的 index，然后根据它设置 animation-delay，如下面的 sn-p 所示。

需要注意的一个关键点是我已将backwards (animation-fill-mode) 添加到animation。这是必需的，因为通常元素将保持默认状态，直到动画的延迟计时器到期。在这种情况下，默认状态为opacity: 1（因为.allPro 上没有opacity 设置）。这意味着所有元素立即变为可见，然后当动画真正开始时，它们会闪烁。

通过将 backwards 设置为填充模式，我们指示 UA 在延迟期间元素应保持第一个关键帧中提到的状态。此更改意味着元素在添加后立即获得opacity: 0 设置（因为animation 已添加到默认选择器中）。因此，它们仅在动画实际发生时才开始出现，而不是在它之前出现。

$(document).ready(function() {
  for (var i = 0; i < 10; i++) {
    $('body').append('<div class="allPro"></div>');
  }
  $('.allPro').each(function() {
    var delay = $(this).index();
    $(this).css('animation-delay', delay + 's');
  });
});

.allPro {
  width: 150px;
  height: 150px;
  float: left;
  margin: 5px;
  background-color: #000;
  animation: fadein 2s backwards;
}
@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>