Question

我有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>

我有两个带有背景图像的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）并让它们在页面加载后同时工作，我将非常感激。先感谢您。

Answer 1

我想我有解决方案。我今天做的很小，基于同样的例子，这对我有用。基本上我有一个'开启者'点击转弯，让其他3个div在转弯结束时转换。每个人都有自己的速度。然后回来 - 当点击关闭时 - 前3个div正在关闭，当这个结束时 - 'opener'将结束动画。

HTML：

<div id="opener" onclick="switch_toolbox('open')" class="vertical">Food Toolbox</div>
<div id="tools">
  <h2 id="toolbox_title" class="title">Appliances</h2>
</div>
<div id="freezer">
  <h2 id="food_title" class="title">Food store</h2>
</div>
<div id="spicebox">
  <h2 id="spices_title" class="title">Spices</h2>
</div>

CSS：

#opener{
  display:block;
  overflow:hidden;
  width:8.8em;
  background-color:#F00;
  font-weight:600;
  font-size:1.5;
  padding:0 0.5em;
  cursor:pointer;
   transition:all 0.5s ease 0s;
  -moz-transition:all 0.5s ease 0s; /* Firefox 4 */
  -webkit-transition:all 0.5s ease 0s; /* Safari and Chrome */
  -o-transition:all 0.5s ease 0s; /* Opera */
  -ms-transition:all 0.5s ease 0s; /* IE */

}
.vertical{
  -webkit-transform: rotate(90deg), translate(3em,3em);
  -moz-transform:  rotate(90deg) translate(3em,3em);
  -o-transform: rotate(90deg) translate(3em,3em);
  -ms-transform: rotate(90deg) translate(3em,3em);
  transform: rotate(90deg) translate(3em,3em); 
}
.horizontal{
  -webkit-transform: rotate(0), translate(0,0);
  -moz-transform:  rotate(0) translate(0,0);
  -o-transform: rotate(0) translate(0,0);
  -ms-transform: rotate(0) translate(0,0);
  transform: rotate(0) translate(0,0); 
}

#tools{
  display:block;
  overflow:hidden;
  height:1.2em;
  width:0;
  transition:width 1.5s ease 0s, height 1s ease 0s;
  -moz-transition:width 1.5s ease 0s, height 1s ease 0s; /* Firefox 4 */
  -webkit-transition:width 1.5s ease 0s, height 1s ease 0s; /* Safari and Chrome */
  -o-transition:width 1.5s ease 0s, height 1s ease 0s; /* Opera */
  -ms-transition:width 1.5s ease 0s, height 1s ease 0s; /* IE */
 }
#freezer{
  display:block;
  overflow:hidden;
  height:1.2em;
  width:0;
  transition:width 1s ease 0.5s, height 1s ease 0s;
  -moz-transition:width 1s ease 0.5s, height 1s ease 0s; /* Firefox 4 */
  -webkit-transition:width 1s ease 0.5s, height 1s ease 0s; /* Safari and Chrome */
  -o-transition:width 1s ease 0.5s, height 1s ease 0s; /* Opera */
  -ms-transition:width 1s ease 0.5s, height 1s ease 0s; /* IE */
}

#spicebox{
  display:block;
  overflow:hidden;
  height:1.2em;
  width:0;
  transition:width 0.5s ease 1s, height 1s ease 0s;
  -moz-transition:width 0.5s ease 1s, height 1s ease 0s; /* Firefox 4 */
  -webkit-transition:width 1.5s ease 1s, height 1s ease 0s; /* Safari and Chrome */
  -o-transition:width 0.5s ease 1s, height 1s ease 0s; /* Opera */
  -ms-transition:width 0.5s ease 1s, height 1s ease 0s; /* IE */
}

最后JS：

  function switch_toolbox(direction){
  var spicebox = document.getElementById('spicebox');
  var opener = document.getElementById('opener');
  if(direction=='close'){
      closeem();
      spicebox.addEventListener("transitionend", closeme, false);
   }else{
      openme();
      opener.setAttribute('onclick','switch_toolbox("close")');
      opener.addEventListener("transitionend", openem, false);
    }
    return false;
}
function openme(){
  var opener = document.getElementById('opener');
  opener.setAttribute('class','horizontal');
}
function closeme(){
  var spicebox = document.getElementById('spicebox');
  spicebox.removeEventListener("transitionend", closeme, false);
  var opener = document.getElementById('opener');
  opener.removeEventListener("transitionend", openem, false);
  opener.setAttribute('class','vertical');
  opener.setAttribute('onclick','switch_toolbox("open")');
  var tools = document.getElementById('tools');
}
function openem(){
  var opener = document.getElementById('opener');
  opener.removeEventListener("transitionend", openem, false);
  var spicebox = document.getElementById('spicebox');
  spicebox.removeEventListener("transitionend", closeme, false);
  var tools = document.getElementById('tools');
  var freezer = document.getElementById('freezer');
  tools.style.backgroundColor='#EBD3A3';
  tools.style.width='20em';
  freezer.style.width='20em';
  freezer.style.backgroundColor='#B7CEEC';
  spicebox.style.width='20em';
  spicebox.style.backgroundColor='#FFA500';
}
function closeem(){
  var tools = document.getElementById('tools');
  var freezer = document.getElementById('freezer');
  var spicebox = document.getElementById('spicebox');
  freezer.style.height='1.2em';
  spicebox.style.height='1.2em';
  tools.style.height='1.2em';
  tools.style.width='0';
  freezer.style.width='0';
  spicebox.style.width='0';
}

希望这有帮助，这就是你要找的东西

最佳

Pifon

使用css3 / javascript在div中转换多个对象

1 个答案: