画像の回転

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

data-*属性とセレクタを使用してしまいました。 nth-childよりもう少し冗長ですが、作業の利点があります。クラスリストを解析するよりもきれいです。

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

属性セレクタとnth-childを交換：回転するとき

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

は、dataset順序をインクリメント

各要素は、HTMLまたはJavaScriptで割り当てることができるdata-order属性を有しています。ここで

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です：これは、我々はプロパティを変更しているにもかかわらず、属性を更新するようです。

Answer 2

あなたができることは、要素からクラス名を追加または削除できることです。たとえば、div要素があります。そのクラス値はclass="item"です。その要素のクラス名リストにアニメーションを持つ別のクラス名を追加すると、その時点でそのdiv要素がそのアニメーションをすぐに表示します。

例えば、 div.className += " animatedClass";

Answer 3

実際には非常に興味深い問題です。そして、私が思いついた解決策はここにあります。マークアップとCSSをいくつか追加しますが、まだnth-childを使用しています。正直なところ、私はこれについてもう少し後で作業して、より洗練された解決策を思いつくことができないかどうかを見てみましょう。しかし、今のところ私はjsFiddleをフォークしました。

ラッパーdivでクラスを切り替えることで、スタイルを回転させることができます。

しかし、実際の質問では、追加画像をアニメートすることはできますが、ここで考えている方法ではできません。最初の付加アニメーションは、ページを最初に読み込んだときにアニメートされることを意味します。 @keyframesを使用してこれを行うことができます。そして、イメージを、どこにあるかの開始位置からスライドするように設定します。しかし、再び、これは最初の負荷でも発生します。あなたは最初の読み込みのために「スピン・イン・イン・プレイス」でそれを偽造することができます。だから、すべての画像を一度読み込んでもらう。