CODEWITHSUNDEEP
javascriptcss
Setsuna
Setsuna

Reputation: 2141

How to get animate divs based on an array to appear one at a time with maybe CSS3 only?

Assume I have the following array:

var myarray = [1, 2, 3, 4, 5]

What is the cleanest way using Javascript/CSS3 to make it such that onpage load, each element in the array is shown in a box/div with a red background color on the page? Usually I would just do:

for(var i = 0; i < myarray.length; i++) {
   bodyelement.append("<div class="box">"+myarray[i]+"</div>");
}

The issue is, it is super fast and they all just show up instantaneously without any real "effect".

Though how do I make them "sequentially" animate in as it is appended? Say, for example, the box would animate say from a overly big box and shrink down to the size of the actual div, or fade in gradually. Can this be done with CSS3 only or is there javascript required? How can I create this effect?

Upvotes: 0

Views: 2134

Answers (2)

Zack Argyle
Zack Argyle

Reputation: 8427

Here is an example of what I described in the comments. JSFIDDLE.

Basically you use css transitions, and add a class to each element after a certain period of time.

(function() {
  var elements = document.querySelectorAll("#test div");

  for (var i = 0; i < elements.length; i++) {
     load(elements[i], i);   
  }

  function load(elem, i) {
    setTimeout(function() {
        elem.classList.add("load");
    },50 * i);
  }
}());

CSS

#test div {
  -webkit-transition: opacity 2s ease-in;
     -moz-transition: opacity 2s ease-in;
      -ms-transition: opacity 2s ease-in;
       -o-transition: opacity 2s ease-in;
          transition: opacity 2s ease-in;
}

#test div.load {
  opacity: 1;
}

Upvotes: 1

TimSPQR
TimSPQR

Reputation: 2984

This FIDDLE may get you started.

JS

var fadeintime = 500;

animatediv();

function animatediv()
{
    var number = 0;
    var interval = setInterval(function() { 
                             var divid = $("#div" + number);
                             divid.animate({opacity: "1"}, fadeintime);
                             number++; 
                          if(number > 4) clearInterval(interval);
                   }, 1000);

}

Based on THIS.

Upvotes: 0

Related Questions