javascript - Div 动画自动高度

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';