是否可以使用nth-child值作为属性中的参数？ （如何） [英] Is it possible to use the nth-child value as a parameter in a property? (and how)

问题描述

简短描述（tl; dr;）

使用<$ c $的值是否有纯CSS c> nth-child 在CSS属性中？这样的：

  span.anim：nth-​​child（N）{animation-delay：N * 0.5s; } 
  

如果有，我该怎么办？如果没有，我怎么能以一个干净的方式模仿它？ （我敢肯定我在这里太麻烦了）

---

详细说明

我创建了一个简单的动画，其中字母在旋转时淡入。为此，我使用javascript（使用jQuery）和CSS的组合，但是创建一些问题（见下文）;所以我试图移动到一个纯CSS解决方案，并以大量的规则结束。

这个（简化）CSS是两个解决方案的共同点： p>

  span.anim {
 font-size：30px; 
 opacity：0; 
 animation：anim 1s; 
 animation-fill-mode：forward; 
} 
 
 @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  setTimeout（'$（＃animate）。append（< span class = \ 'anim\'>'+ aux [x] +'< / span>）'，500 * x）; 
} 
  

这很好用...除非用户移动到不同的标签，动画混乱，结果是意想不到的。您可以在此JSFiddle上看到它： http://jsfiddle.net/e7b9ygk4/ （运行脚本，移动

$ b b

我可以通过在更小的元素中打破元素（这是我觉得我过于复杂的部分），然后应用动画到每个元素具有不同的延迟来实现相同的效果：

  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.5 s; } 
  

解决方案

有一个非常实验CSS函数，用于将属性用作元素的属性。目前它只适用于伪元素，所以你必须考虑在这种用例中对你的标记进行一些聪明的重新工作。

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

  / * attr（name，units，fallback）* / 
 span.anim {animation-delay：attr（offset，1）* 0.5s;} 
  

 < span class =animoffset =0 ;< / span> 
< span class =animoffset =1>< / span> 
< span class =animoffset =2>< / span> 
< span class =animoffset =3>< / span> 
< span class =animoffset =4>< / span> 
  

请记住，这仍然是被广泛接受的方式， ，上面的语法目前不工作，因为它将需要使用伪元素，如：after。

至少，这是一个有趣的想法。 p>

Short description (tl;dr;)

Is there a "pure CSS" way (not Less/Sass) of using the value of the nth-child inside the CSS properties? Something like this:

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

If there is, how can I do it? If there is not, how could I mimic it in a clean way? (I'm sure that I'm over-complicating things here)

---

Long description

I was creating a simple animation in which letters fade in while rotating. For that, I was using a combination of javascript (with jQuery) and CSS, but that created some problems (see below); so I tried to move to a CSS-only solution, and that ended in a large amount of rules.

This (simplified) CSS is common to both solutions:

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;
    }
}

Using JavaScript + CSS

My JavaScript code looks like this:

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);
}

This works great... unless the user moves to a different tab, then the animation messes up, and the result is unexpected. You can see it on this JSFiddle: http://jsfiddle.net/e7b9ygk4/ (run the script, move to a different tab, and go back after a few seconds).

Using only CSS

I can achieve the same effect by breaking the element in smaller elements (this is the part I feel I'm over-complicating), and then applying the animation to each element with a different delay:

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; }

This works great, even if the user moves to a different tab, but it results in a lot of unnecessary code (both HTML and CSS, although it could be simplified using JavaScript). You can see it working on this JSFiddle: http://jsfiddle.net/f5my3sm1/.

My gut tells me that this could be achieved using Sass/Less, but I want to know if there is a simple "pure CSS" way of doing this, something that could be achieved (hopefully) with a single rule like:

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. Currently it only works on pseudo elements, so you'd have to consider coming up with some kind of clever re-working of your markup in this use case.

You could put the offset in a data-attribute on your markup (or with JS), and then use something like the following:

/* 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>

Please keep in mind that this is still a ways off from being widely accepted, and like I mentioned before, the above syntax wouldn't work currently because it would need to use pseudo elements like :after.

At the very least, it's something fun to think about.

这篇关于是否可以使用nth-child值作为属性中的参数？ （如何）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！