ページが読み込まれるとすぐに同時に3つのオブジェクト（div）が同時に表示されます。これをアニメーション化するのを助けるために、ちょうど1つのオブジェクトで完全に動作するJavaScriptの少しを使用していますが、3つのオブジェクトすべてを個々のスタイリングに従うようにJavaScriptを書き直す方法がわかりません。css3/javascriptを使用して複数のオブジェクトを1つのdivに渡す
Mozillaデベロッパーネットワークサイト（https://developer.mozilla.org/en/CSS/CSS_transitions/）の「移行イベントを使用してオブジェクトをアニメートする」の例が見つかりましたが、残念ながらフォーラムを無効にして解決策を見つけることができませんでした。私はしばらくの間、左側にオブジェクトのスタイルを表現するために、背景画像との1を2つのdiv要素を持っており、それが正しい位置にスタイリングだ
<body onload="runDemo()">
<div id="cloud-comtainter">
<div class="cloud1Right"></div>
<div class="cloud2Right"></div>
<div class="cloud3Right"></div>
</div>
</body>
：
は、ここで基本的なHTMLです。ここで
1つのオブジェクトのためのCSSです：
.cloud1Right {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:2%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
.cloud1Left {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:90%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
そして、ここでは、このオブジェクトを呼び出し、再び右の画面を横切って移動して、それをアニメーション化することのJavascriptです：
function runDemo() {
var el = updateTransition();
// Set up an event handler to reverse the direction
// when the transition finishes.
el.addEventListener("transitionend", updateTransition, true);
}
function updateTransition() {
var el = document.querySelector("div.cloud1Left");
if (el) {
el.className = "cloud1Right";
} else {
el = document.querySelector("div.cloud1Right");
el.className = "cloud1Left";
}
return el;
}
私が同時に移行したい他の2つの要素は、それぞれ独自のスタイル（位置、左％、遷移率など）で、.cloud2Left（および.cloud2Right）および.cloud3Left（および.cloud3Right）という名前が付けられています。
私は解決策のためにウェブを精査し、jsを使いこなしました。私はここやウェブの周りを見て、セレクターに関する情報と、運がない複数のセレクターの使い方を見つけました。誰もが任意のアイデアを持っているか、JavaScriptをリライトする方法を知っている場合はel.className
ため
var el=document.querySelector("div.cloud1Left, div.cloud2Left, div.cloud3Left");
と
var el=document.querySelector("div.cloud1Left");
var el=document.querySelector("div.cloud2Left");
var el=document.querySelector("div.cloud3Left");
と同じ：私はそのようなのような複数のセレクタを使用して試してみました3つのオブジェクト（div）をすべて含むようにして、ページが読み込まれるとすぐに同時に動作させるようにすることができます。私は非常に感謝しています。前もって感謝します。