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，如下面的代码段所示。

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

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

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: