Div Animate自动高度

Question

我正在使用JavaScript工作，无法使用任何库，例如J Query或CSS动画。

我有一个具有未定义高度的Div，它会根据其包含的内容自动调整大小。

通过设置innerHTML值可以动态更改内容。 这很好用，但是Div大小的变化是令人讨厌的。 我想动画化高度的变化。

我已经看到很多涉及此主题的代码，但是所有解决方案都基于库或CSS动画。

这是我关于如何实现动画高度动态变化的想法

//get the current height of the div holder
var heightStart = document.getElementById("divHolder").clientHeight;

//the new height, currently I don't know to obtain this
var heightEnd = 1000; 

//start a timer to animate the height change 
var timer = setInterval( function() {

    //clear timer if old height reached new height
    if ( heightStart >= heightEnd ){
        clearInterval(timer);
    }

    //set new height
    element.style.height= heightStart ;

    //incrementing height gradually
    heightStart = heightStart  + ( heightStart * 0.1 );

} , 50);

因此，我面临的问题是如何知道新的高度，因为新高度将始终取决于屏幕尺寸和内容。

我在想可以将div的高度设置为与heightStart相等的固定高度。 然后将溢出设置为无。 然后设置新的innerHTML内容。 因此Div不会自动更改以适应新内容。 然后，我将使用上面的动画功能逐渐增加高度，直到内容完全可见为止。

问题是我不知道如何确定何时达到自动高度，或者什么时候已经显示了所有内容的高度。

思考？

谢谢。

Answer 1

首先，应在应用新内容之前分配heightStart 。 并在新内容输入之后。您可以将其大小设置为heightEnd 。

var heightStart = document.getElementById("divHolder").clientHeight;

// APPLY NEW CONTENT HERE
document.getElementById("divHolder").innerHTML = NEW_CONTENT

document.getElementById("divHolder").style.height = 'auto';
var heightEnd = document.getElementById("divHolder").clientHeight;

document.getElementById("divHolder").style.height = heightStart;
document.getElementById("divHolder").style.overflow = 'hidden';