Question

我想在我的页面中使用一些动画，所以我谷歌“javascript动画”，我发现了wonderful tutorial：

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)

}

但是我发现如果页面中的元素在其“style”属性中没有“width或height”属性。我们怎样才能使用它们？

现在，假设我在页面中有一个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”值???

其宽度和高度应根据元素内部的内容进行更改。

即使动画完成，通常情况下，元素不需要“width”和“height”attrubutes，它只需要“display ='block'”。

这是否意味着想要动画的元素必须具有明确的大小？

Answer 1

我会分三步完成：

使用jQuery函数或自定义函数快速display:block div，再次获取其大小（宽度/高度）和display:none。它会如此之快，人眼无法看到它。
使用我之前获得的宽度/高度进行动画
在动画结束时，我会将宽度/高度设置为auto或initial。因此，如果您在其中添加一些内容，它将自动增加其大小。

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

1 个答案: