基于CSS n -child旋转图像

Question

我能够编写一个JavaScript carousel，并认为使用CSS转场与nth-child选择器可能更紧凑，像这样:

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

这种方法适用于除了附加元素之外的所有元素。它被完全删除，然后重新连接，所以它最终在正确的位置，但不使用过渡效果。是否有一种方法可以使用CSS转换，即使在DOM中重新定位元素?

jsFiddle演示-单击文档以推进图像。

Answer 1

你所能做的就是从元素中添加或删除类名。例如，你有一个div元素。其类值为class="item"。如果你在该元素的类名列表中添加另一个有动画的类名，那么该div元素将立即显示该动画。

。div.className += " animatedClass";

Answer 2

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

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

然而，至于你的实际问题，你可以动画一个附加图像，你可以，但不是你在这里思考的方式。这将是一个初始附加动画，这意味着当页面第一次加载时，它将动画。您可以使用@keyframes来做到这一点，并设置它，以便您想要的图像从起始位置滑到合适的位置。但是，同样，这也会在第一次加载时发生。你可以在第一次装载时"旋转到位"。让所有图片在加载时旋转一次

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

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

var forEach = [].forEach,
    nodes = document.body.children,
    length = nodes.length;
//On rotate:
forEach.call(nodes, function(node) {
    node.dataset.order++;
    node.dataset.order %= length;
});