Question

I was able to write a JavaScript carousel and thought it might be more compact to use CSS transitions with nth-child selectors like this:

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

The items would then be rotated by appending the first child or prepending the last child of the container:

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

This approach works well for all but the appended element. It is removed entirely and then reattached, so it ends up in the right spot but does not use the transition effect. Is there a way to use CSS transitions even when relocating an element in the DOM?

jsFiddle Demo – Click the document to advance the images.

Answer 1

I ended up using a data-* attribute and selector. It is a little more verbose than nth-child, but has the advantage of working. It is also cleaner than parsing through class lists.

Each element has a data-order attribute, which can be assigned with HTML or JavaScript:

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

Replace nth-child with the attribute selector:

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

When rotating, increment the order in the dataset. This seems to update the attribute, even though we are modifying the property:

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

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

Here is the final result.