Question

我有一个HTML页面，可以生成任意数量的<div></div>标记。

我想为每个div添加不同的动画延迟，例如：

对于HTML结构：

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div:nth-child(1) {
    animation-delay: 1s;
}

div:nth-child(2) {
    animation-delay: 2s;
}

div:nth-child(3) {
    animation-delay: 3s;
}

div:nth-child(4) {
    animation-delay: 4s;
}

现在没有Javascript的帮助，CSS是否提供了任何功能，可以更轻松地为div的任意随机数做同样的事情？

我避免使用jQuery，因为each()的效果很差。

或者，当生成元素数量的上限未知时，是否有任何纯CSS替代方法来延迟动画？

Answer 1

不幸的是，没有简单的CSS。

由于您根本不想寻找Javascript解决方案，您可能会喜欢使用像SASS或LESS等CSS预处理器。

SASS代码：

$selector: div !default

@for $i from 1 through 4
  .#{$selector}:nth-child(#{$i})
    animation-delay: $i + "s"

生成的CSS代码：

.div:nth-child(1) {
  animation-delay: "1s";
}

.div:nth-child(2) {
  animation-delay: "2s";
}

.div:nth-child(3) {
  animation-delay: "3s";
}

.div:nth-child(4) {
  animation-delay: "4s";
}

另请参阅：can I write a loop for css

但是，如果您不想生成未知数量的CSS规则，如下面的评论中所述。你可以使用没有jQuerys .each的javascript，甚至没有元素样式。

Javascript代码：

// function wrapper for inserting rules in stylesheets
function addCSSRule(sheet, selector, rules, index) {
  if(sheet.insertRule) {
    sheet.insertRule(selector + "{" + rules + "}", index);
  } else {
    sheet.addRule(selector, rules, index);
  }
}

// is dom loaded
document.addEventListener("DOMContentLoaded", function() {  
    var divs = document.getElementsByTagName("div"); // get all the divs
    var i = divs.length;
    for (i; i > 0; i--) {
      var selector = "div:nth-child(" + i + ")"; // setup selector
      var rule = "animation-delay: " + i + "s" 
      addCSSRule(document.styleSheets[0], selector, rule); // insert rule in first stylesheet.
    }   
});

以下是两个解决方案的代码集示例：http://codepen.io/Type-Style/pen/PZvJWz

有关详细信息，请参阅https://davidwalsh.name/add-rules-stylesheets。

为动态生成的HTML标记添加不同的动画延迟

1 个答案: