我有 3 个对象(div),我想在页面加载后同时转换。为了帮助对此进行动画处理,我使用了一点 javascript,它只与一个对象完美配合,但我不确定如何重写 javascript 以激活所有 3 个对象,使其服从每个对象的单独样式。
我在 Mozilla 开发者网络网站 ( 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;
}
现在,我想同时转换的另外 2 个元素被命名为 .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)并在页面加载后立即让它们同时工作,我将不胜感激。先感谢您。