基于 CSS nth-child 旋转图像答案

【问题标题】：Rotating images based on CSS nth-child基于 CSS nth-child 旋转图像
【发布时间】：2012-08-05 22:29:53
【问题描述】：

我能够编写一个 JavaScript 轮播，并认为使用带有 nth-child 选择器的 CSS 转换可能会更紧凑：

img {
    transition: all 1s linear; /* or corresponding vendor prefixes */
    position:absolute;
}

img:nth-child(1) {
    top: 0%;
    left: 0%;
}

img:nth-child(2) {
    top: 0%;
    left: 50%;
}

/*and so on...*/

然后通过附加容器的第一个子项或添加容器的最后一个子项来旋转项目：

parent.appendChild(parent.children[0]);

这种方法适用于除附加元素之外的所有元素。它被完全移除然后重新连接，所以它最终在正确的位置，但不使用过渡效果。有没有办法在 DOM 中重新定位元素时使用 CSS 过渡？

jsFiddle Demo - 单击文档以前进图像。

【问题讨论】：

我没有足够的信心回答，但我真的不这么认为。 CSS 过渡在一个平面上运行，独立于 DOM 元素的组织。您可以使用 Javascript 为追加设置动画，或者更好的是，切换到类（box-1、box-2、box-3、box-4）而不是 nth-child，并使用 Javascript 在单击时增加每个类或重置为 1，如果之前在 4.

标签： javascript css dom dom-manipulation css-transitions

【解决方案1】：

您可以做的是从元素中添加或删除类名。例如，您有一个 div 元素。其类值为class="item"。如果您将另一个具有动画的类名添加到该元素的类名列表中，则该 div 元素将在该时刻立即显示该动画。

例如。 div.className += " animatedClass";

【讨论】：

【解决方案2】：

确实是一个非常有趣的问题。这是我想出的解决方案。添加一些标记和一些 CSS，但在仍然使用 nth-child 的同时完成它。老实说，我可能会在以后再做一些工作，看看我是否能想出一个更优雅的解决方案，但现在，我分叉了jsFiddle。

它的核心是在包装器 div 上切换一个类，并使用它来旋转样式。

但是，就您是否可以为附加图像设置动画的实际问题而言，您可以，但不是您在此处考虑的方式。这将是一个初始附加动画，这意味着当页面第一次加载时，它将动画。您可以使用@keyframes 执行此操作，并将其设置为您想要的图像从它所在的起始位置滑入到位。但是，同样，这也将在第一次加载时发生。您可以通过在第一次加载时“旋转到位”来伪造它。因此，让所有图像在加载时旋转一次。

【讨论】：

【解决方案3】：

我最终使用了data-* 属性和选择器。它比nth-child 稍微冗长一些，但有工作的优势。它也比通过类列表解析更干净。

每个元素都有一个data-order属性，可以用HTML或JavaScript赋值：

<img src="http://placekitten.com/203/203" data-order=0 />

用属性选择器替换nth-child：

img[data-order="1"] {
    top: 0%;
    left: 50%;
}

旋转时，增加dataset 中的顺序。这似乎更新了属性，即使我们正在修改属性：

var forEach = [].forEach,
    nodes = document.body.children,
    length = nodes.length;

//On rotate:
forEach.call(nodes, function(node) {
    node.dataset.order++;
    node.dataset.order %= length;
});

这里是final result。

【讨论】：