是否可以将nth-child值用作属性中的参数？(如何)

Question

简短说明(tl; dr;)

是否有使用nth-childCSS属性内部值的"纯CSS"方式(而不是Less/Sass)？像这样的东西:

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

如果有,我该怎么办？如果没有,我怎么能以干净的方式模仿它？(我确定我在这里过于复杂了)

---

详细描述

我正在创建一个简单的动画,其中字母在旋转时淡入.为此,我使用了javascript(与jQuery)和CSS的组合,但这产生了一些问题(见下文); 所以我试图转向仅限CSS的解决方案,并以大量规则结束.

这个(简化的)CSS对于两种解决方案都是通用的:

span.anim {
    font-size:30px;
    opacity:0;
    animation: anim 1s;
    animation-fill-mode: forwards;
}

@keyframes anim {
    from {
        transform: rotate(0deg);
        opacity:0;
    }
    to {
        transform: rotate(360deg);
        opacity:1;
    }
}

使用JavaScript + CSS

我的JavaScript代码如下所示:

var aux = $("#animate").text();
$("#animate").text("");

for (var x = 0; x < aux.length; x++) {
    setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")', 500 * x);
}

这很有效......除非用户移动到另一个选项卡,否则动画会混乱,结果是意外的.你可以在这个JSFiddle上看到它:http://jsfiddle.net/e7b9ygk4/(运行脚本,移动到另一个选项卡,几秒钟后返回).

仅使用CSS

我可以通过破坏较小元素中的元素来实现相同的效果(这是我觉得我过于复杂的部分),然后将动画应用于具有不同延迟的每个元素:

span.anim:nth-child(1) { -webkit-animation-delay:0.5s; }
span.anim:nth-child(2) { -webkit-animation-delay:1.0s; }
span.anim:nth-child(3) { -webkit-animation-delay:1.5s; }
span.anim:nth-child(4) { -webkit-animation-delay:2.0s; }
span.anim:nth-child(5) { -webkit-animation-delay:2.5s; }
span.anim:nth-child(6) { -webkit-animation-delay:3.0s; }
span.anim:nth-child(7) { -webkit-animation-delay:3.5s; }
span.anim:nth-child(8) { -webkit-animation-delay:4.0s; }
span.anim:nth-child(9) { -webkit-animation-delay:4.5s; }
span.anim:nth-child(10) { -webkit-animation-delay:5.0s; }
span.anim:nth-child(11) { -webkit-animation-delay:5.5s; }
span.anim:nth-child(12) { -webkit-animation-delay:6.0s; }
span.anim:nth-child(13) { -webkit-animation-delay:6.5s; }
span.anim:nth-child(14) { -webkit-animation-delay:7.0s; }
span.anim:nth-child(15) { -webkit-animation-delay:7.5s; }
span.anim:nth-child(16) { -webkit-animation-delay:8.0s; }

即使用户移动到不同的选项卡,这也很有效,但它会产生大量不必要的代码(HTML和CSS,尽管可以使用JavaScript简化).你可以看到它在这个JSFiddle上工作:http://jsfiddle.net/f5my3sm1/.

我的直觉告诉我,这可以使用Sass/Less来实现,但我想知道是否有一种简单的"纯CSS"方式来做到这一点,可以用一条规则来实现(希望如此):

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

Answer 1

CSS变量几乎在所有现代浏览器上都具有通用支持，并且可以实现与@GreatBlake的答案attr几乎相同的预期效果。除了可以在用户定义的属性中定义数据外，还可以将其定义为属性中的自定义属性，style并使用以下var()函数获取这些自定义属性的值：

<span class="anim" style="--n: 0"></span>
<span class="anim" style="--n: 1"></span>
<span class="anim" style="--n: 2"></span>
<span class="anim" style="--n: 3"></span>
<span class="anim" style="--n: 4"></span>

span.anim {
  animation-delay: calc(var(--n) * 0.5s);
}

Answer 2

有一个非常实验性的 CSS 函数，用于使用属性作为元素的属性。目前它仅适用于伪元素，因此您必须考虑在此用例中对标记进行某种巧妙的重新处理。

您可以将偏移量放在标记上的数据属性中（或使用 JS），然后使用如下所示的内容：

/* attr(name, units, fallback) */
span.anim {animation-delay: attr(offset, 1) * 0.5s;}

<span class="anim" offset="0"></span>
<span class="anim" offset="1"></span>
<span class="anim" offset="2"></span>
<span class="anim" offset="3"></span>
<span class="anim" offset="4"></span>

请记住，这距离被广泛接受还有很长的路要走，就像我之前提到的，上面的语法目前不起作用，因为它需要使用像 :after 这样的伪元素。

至少，想想也是一件很有趣的事情。