Transitioning multiple objects across a div using css3/javascript

Question

I have 3 objects (divs) that I want to transition simultaneously as soon as the page loads. To help animate this I am using a little bit of javascript which works perfectly with just the one object but I'm not sure how to rewrite the javascript to activate all 3 objects obey each objects individual styling.

I found an example of "Using transition events to animate an object" on the Mozilla Developer Network site ( https://developer.mozilla.org/en/CSS/CSS_transitions/ ), but unfortunately they disabled their forums so I couldn't find a solution.

Here is the basic HTML:

<body onload="runDemo()">
   <div id="cloud-comtainter">
<div class="cloud1Right"></div>
    <div class="cloud2Right"></div>
    <div class="cloud3Right"></div>
   </div>
</body>

I have 2 divs with an background-image, one to represent the object's styling while on the left and it's styling on the right positions.

Here is the CSS for the one object:

.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;  
 }

And here is the Javascript that calls up this object and animates it to move right across the screen and then back again:

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

Now, my other 2 elements I want to transition at the same time are named .cloud2Left (and .cloud2Right) and .cloud3Left (and .cloud3Right) each with it's own specific styling (position, left %, transition rate, etc).

I've scoured the web for a solution and have messed around with the js. I looked here and around the Web and found information about selectors and how to use multiple selectors with no luck. I've tried using the multiple selectors like such:

var el=document.querySelector("div.cloud1Left, div.cloud2Left, div.cloud3Left");

and

var el=document.querySelector("div.cloud1Left");
var el=document.querySelector("div.cloud2Left");
var el=document.querySelector("div.cloud3Left");

and the same for the el.className

If anyone has any ideas or knows how to rewrite the javascript function to include all 3 objects (divs) and have them work simultaneously as soon as the page loads I would be greatly appreciative. Thank you in advance.

Pifon · Accepted Answer · 2012-02-18 08:16:38Z

I think I have solution for you. I was doing a small thing today, based on the same example and this worked for me. Basically I have one 'opener' which clicked turns and lets 3 other divs transition when turn is finished. Each one with its own speed. And back - when clicked to close - first 3 divs are closing and when this is finished - 'opener' turns finishing animation.

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 */
}

And finally 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';
}

Hope this help, and this is what you were looking for

Best Pifon

Collectives™ on Stack Overflow

Transitioning multiple objects across a div using css3/javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related