旋转图像

我能够编写JavaScript旋转木马，并认为这可能是更紧凑使用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]);

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

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

来源

2012-01-02 Dennis

+1有趣的问题。 – pimvdb 2012-01-02 22:12:02

我没有足够的信心回答，但我真的不这么认为。CSS转换在上面的平面上运行，并且独立于DOM元素的组织。您可以使用Javascript为附加动画，或者更好地切换到类（box-1，box-2，box-3，box-4）而不是nth-child，并使用Javascript将每个类增加一下，或者重置为1 if以前在4。 – glortho 2012-01-02 22:14:58

我结束了使用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。

来源

2012-08-05 14:29:53 Dennis

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

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

来源

2012-01-02 22:23:45 tcak

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

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

但是，就您的实际问题而言，您是否可以为附加图像制作动画，您可以，但不能以您在此处想的方式。这将是一个初始的附加动画，这意味着首次加载页面时会动画。你可以使用@keyframes来做到这一点，并设置它，使你想要的图像从原来的位置开始滑动到位。但是，这也会在第一次加载时发生。您可以通过“第一次加载时旋转到位”来伪造它。因此，让所有图像在加载时旋转一次。

来源

2012-01-02 22:44:23 Ktash

回答

相关问题