У меня есть 3 объекта (деления), которые я хочу переместить одновременно, как только страница загрузится. Чтобы помочь анимировать это, я использую немного javascript, который прекрасно работает только с одним объектом, но я не уверен, как переписать javascript, чтобы активировать все 3 объекта в соответствии с индивидуальным стилем каждого объекта.
Я нашел пример «Использование событий перехода для анимации объекта» на сайте Mozilla Developer Network (https://developer.mozilla.org/en/CSS/CSS_transitions/), но, к сожалению, они отключили свои форумы, поэтому я не смог найти решение.
Вот основной HTML:
<body onload="runDemo()">
<div id="cloud-comtainter">
<div class="cloud1Right"></div>
<div class="cloud2Right"></div>
<div class="cloud3Right"></div>
</div>
</body>
У меня есть 2 элемента div с фоновым изображением, один для представления стиля объекта слева и стиля справа.
Вот 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;
}
Теперь два других моих элемента, которые я хочу перевести одновременно, называются .cloud2Left (и .cloud2Right) и .cloud3Left (и .cloud3Right), каждый из которых имеет свой собственный стиль (положение, левый%, коэффициент перехода и т. Д.) ).
Я искал в Интернете решение и бездельничал с js. Я посмотрел здесь и вокруг Интернета и нашел информацию о селекторах и как использовать несколько селекторов без удачи. Я пытался использовать несколько селекторов, как например:
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");
и то же самое для el.className
Если у кого-то есть идеи или он знает, как переписать функцию javascript, чтобы включить все 3 объекта (div) и заставить их работать одновременно, как только страница загрузится, я был бы очень признателен. Заранее спасибо.