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

简短说明(tl; dr;)

在CSS属性中使用nth-child的值是否有“纯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; }

解决方法

There is a very experimental CSS function for using attributes as properties for an element.目前它只适用于伪元素,所以你必须考虑在这个用例中对你的标记进行某种巧妙的重新处理.

您可以将偏移量放在标记(或使用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.

至少,这是一个有趣的事情.

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

解决方法

相关文章