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的固定高度。然后将overflow设置为none。然后设置新的innerHTML内容。所以Div不会自动更改以适应新内容。然后我将使用上面的animate函数逐渐增加高度，直到内容完全可见。

问题在于我不知道如何弄清楚何时达到自动高度，或者当所有内容都已显示高度时。

思想？

感谢。

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

Div动画自动高度

1 个答案: