使用 css3/javascript 跨 div 转换多个对象答案

【问题标题】：Transitioning multiple objects across a div using css3/javascript使用 css3/javascript 跨 div 转换多个对象
【发布时间】：2011-10-28 04:41:20
【问题描述】：

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

现在，我想同时转换的另外两个元素分别命名为 .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) 并在页面加载后让它们同时工作，我将不胜感激。先感谢您。

【问题讨论】：

标签： javascript css css-transitions selectors-api

【解决方案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';
}

希望对您有所帮助，这就是您要寻找的东西

最好的派丰

【讨论】：