使用动画时设置元素的大小在JavaScript

我想用一些动画在我的网页，所以我谷歌“的JavaScript动画”，我发现这个wonderful tutorial：使用动画时设置元素的大小在JavaScript

的JavaScript动画是为逐步实现更改DOM元素样式或画布对象。

整个过程被分割成片，每个片由定时器调用。由于计时器间隔非常小，动画看起来连续不断。

所以看来，dom动画是通过逐步设置元素的大小来实现的。

这是本教程所提供的通用动画：

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) 

}

不过，我发现，如果在页面中的元素没有在其“风格”属性“宽度或高度”属性。我们如何使用它们？

现在，假设我在页面中有一个id为“tip_info”的元素，他在开始时并没有显示，当我点击一个按钮时，我希望它与动画一起打开。

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

现在，我尝试使用通用的动画：

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

但我怎么能知道 “The_Final_Width” 和 “The_Final_Height” 价值???

它的宽度和高度应根据元素内部的内容而改变。

即使动画完成，通常，元素不需要“宽度”和“高度”属性，它只需要“display ='block'”。

那么这是否意味着要动画的元素必须具有显式大小？

来源

2011-12-15 hguser

我会做的三个步骤：

使用jQuery函数或自定义函数来快速display:block股利，再得到它的尺寸（宽/高），和display:none。它会非常快，人眼看不到它。
动画与宽度/高度我先前
拿到动画结束，我会宽度/高度设置为auto或initial。所以如果你添加一些内容，它会自动增加它的大小。

来源

2011-12-15 14:15:55

使用动画时设置元素的大小在JavaScript

回答

相关问题