旋轉圖像

我能夠編寫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

回答

相關問題