Geek asks and answers

CSS element navigation added dynamically via JavaScript

I create an element with this:

var dynamic_gallery = document.createElement("li");

Now I assign it a class that gives the element style a { height:0;transition-duration:.4s; } a { height:0;transition-duration:.4s; }

dynamic_gallery.className = "gallery-container";

Immediately after this step, I add another class with style { height:400px !important; } { height:400px !important; }

dynamic_gallery.className += " gallery-exp";

As far as I understand, the element should be created invisible and immediately receive a change in height and gradually increase to 400 pixels.
So why does he still appear immediately in full growth?

+4
source share
2 answers

CSS3 transition-delay event will be fired for elements after they are activated. Here you set the height to 0, but still the "li" element is not in the DOM (therefore, it does not work).

so after setting the height to 0px make it live. those.

document.body.appendChild(dynamic_gallery)

"Li" , transition-duration:.4s.

400 , dynamic_gallery.className + = "gallery-exp";

.

: , 0 , .

,

setTimeout(function(){
    dyna_gallery.className += " gallery-exp";},0)


dyna_gallery.className += " gallery-exp";

: http://jsfiddle.net/zYLmw/

+6

" "?

DOM ( CSS), script, , .

, , , , setTimeout:

var dynamic_gallery = document.createElement("li");
dynamic_gallery.className = "gallery-container"; 
... appending
setTimeout(function(){
    dynamic_gallery.className += " gallery-exp";
}, 2000); // wait 2 seconds before adding the class

:

  • . ( , )
  • !important . .

0 400 px:

(function grow(){
  var h = (parseInt(dynamic_gallery.style.height)||0)+1;
  dynamic_gallery.style.height = h+'px';
  if (h<400) setTimeout(grow, 30);
})();

+3

More articles:


All Articles