javascript – 基于CSS nth-child旋转图像

2019年8月3日 187次阅读

我能够编写一个
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]);

这种方法适用于除附加元素之外的所有元素.它被完全删除然后重新连接,因此它最终位于正确的位置,但不使用过渡效果.有没有办法使用CSS转换,即使重新定位DOM中的元素？

jsFiddle Demo – 单击文档以前进图像.

最佳答案 您可以做的是可以从元素中添加或删除类名.示例您有一个div元素.它的类值是class =“item”.如果您将另一个具有动画的类名添加到该元素的类名列表中,那么该div元素将立即显示该动画.

例如. div.className =“animatedClass”;

点赞