Question

我能够编写一个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 - 点击文档以推进图像。

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

旋转时，递增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。

基于CSS nth-child旋转图像

3 个答案: