Javascript 如何基于元素&x27；s:DOM中的第n个子计数？

我正在编写一个全屏幻灯片，其中的元素在视图中交叉淡入和淡出。我通过设置元素的不透明度和动画延迟来实现交叉淡入淡出效果

我的HTML如下所示：

我使用这个普通CSS来设置元素的动画：

.slide.slide内容，#slides.slide{
位置：绝对位置；
最小宽度：100%；
最小高度：100%；
高度：自动；
}
#幻灯片。幻灯片内容{
背景：#000；
背面可见性：隐藏；
不透明度：0；
变换：比例（1）；
动画：crossFade 24秒无限；
} 
#幻灯片。幻灯片：第n个子项（3）。幻灯片内容{动画延迟：6s}
#幻灯片。幻灯片：第n个子项（2）。幻灯片内容{动画延迟：12s}
#幻灯片。幻灯片：第n个子项（1）。幻灯片内容{动画延迟：18s}

“动画延迟”（animation delay）属性会使幻灯片逐个淡入100%不透明度，从而创建所需的效果

问题

当#slides div中正好有四个子节点时，这种方法非常有效。如何使#slides div中n个子节点都能使用这种方法

动画延迟属性s应等于第n个子项（n）乘以每张幻灯片的时间：

动画延迟=div（n）中的子对象数量*每张幻灯片的时间

我不知道如何在CSS或SASS中实现这一点。朝正确的方向轻轻推一下会很有帮助

编辑

我用angularjs的指令解决了我的问题。这是我的组件：

<img ng-if="$ctrl.type === 'image'" ng-src="{{$ctrl.source}}" alt="slide image" class="slide-content" ng-style="{'animation': 'crossFade ' + {{$ctrl.total*6}} +'s infinite ', 'animation-delay': {{$ctrl.child*6}}+'s'}">

<video ng-if="$ctrl.type === 'video'" autoplay muted loop class="slide-content" ng-src="{{$ctrl.source}}" ng-style="{'animation': 'crossFade ' + {{$ctrl.total*6}} +'s infinite ', 'animation-delay': {{$ctrl.child*6}}+'s'}">
  Your browser does not support the video tag.
</video>

您的浏览器不支持视频标记。

---

这方面有可能改进吗？我还必须有条件地设置@keyframes CSS样式的动画点

如果您知道滑块包含的元素永远不会超过

n

个，那么您可以生成足够长的序列以适应“最坏情况” 虽然不是特别优雅，但它允许您避免使用javascript。 使用SASS很容易

$delay: 6s;
@for $i from 1 through 4 {
  #slides .slide:nth-child(#{$i}) .slide-content{ animation-delay: $delay * $i }
}

或者用混合器

@mixin slide-delay($children, $delay: 0s) {
  @for $i from 1 through $children {
    #slides .slide:nth-child(#{$i}) .slide-content{ animation-delay: $delay * $i }
  }
}

@include slide-delay(4, 1s);

---

使用带有当前标记的Javascript，可以执行以下操作：

//Get Slides NodeList
var slides = document.querySelectorAll('#slides .slide-content');

//Make Array and reverse.
var slidesReversed = Array.prototype.slice.call(slides).reverse();

//Set Animation Delay for each slide.
for (var i = slidesReversed.length - 1; i >= 0; --i) {
  slidesReversed[i].style.animationDelay = i * 6 + 's';
}

---

你好，matthiasdv，我想你可以从ChetanRanpariya那里得到hnit，看来我所要求的是不可能做到的。我想知道why@matthiasdv不清楚你的意思。您希望CSS根据您拥有的HTML元素数量自动生成/更改吗？你需要JavaScript来完成这项工作。@TylerH:我相信你的解释是正确的。@matthiasdv如果你愿意，你可以编辑你的问题，使其包含angularjs和/或JavaScript标记。这样，有人就可以提供一个解决方案，你可能不会想到使用CSS和JS的混合。