Question

I want to use some animation in my page,so I google "javascript animation",I found this wonderful tutorial:

The JavaScript animation is implemented as gradual changing of DOM element styles or canvas objects.

The whole process is split into pieces, and each piece is called by
timer. Because the timer interval is very small, the animation looks
continuous.

So it seems that the dom animation is implemented by set the size of the element step by step.

This is the The generic animation provided by the tutorial:

function animate(opts) {
  
  var start = new Date   

  var id = setInterval(function() {
    var timePassed = new Date - start
    var progress = timePassed / opts.duration

    if (progress > 1) progress = 1
    
    var delta = opts.delta(progress)
    opts.step(delta)
    
    if (progress == 1) {
      clearInterval(id)
    }
  }, opts.delay || 10)
  
}

However I found that if an element in the page does not have the "width or height" property in its "style" property. How can we use them??

Now,suppose I have an element in the page with id "tip_info" who does not show at first,when I click an button,I want it opend with the animation.

<div id="wrapper" sytle="display:none">the content</div>
<input type="button" onclick="animate()" value="open"/>

Now,I try to use the generic animation:

var ele=document.getElementById('wrapper');

animate({
    delay: 10,
    duration: duration || 1000, // 1 sec by default
    delta: delta,
    step: function(delta) {
      ele.style.width= The_Final_Width*delta + "px";
      ele.style.height= The_Final_Height*delta + "px"    
    }
  });

But how can I know the "The_Final_Width" and "The_Final_Height" value???

Its width and height should be changed according to the content inner the element.

Even when the animation complete,normally,the element does not need the "width" and "height" attrubutes,it just need the "display=’block’".

So does it mean that an element want to be animated must have the explict size?

Answer 1

I would do it in three steps:

• Use a jQuery function or a custom function to quickly display:block the div, get its size (width/height), and display:none again. It would be so fast that a human eye can’t see it.
• Animate with the width/height I got previously
• At the end of the animation, I would set width/height to auto or initial. So if you add some content in it, it will increase its size automatically.