潜水动画自动高度

Div Animate Auto Height

本文关键字：高度 动画 潜水      更新时间：2023-09-26

我使用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不会自动更改以适应新内容。然后我会使用上面的animate函数来逐渐增加高度，直到内容完全可见。

问题是，我不知道如何计算何时达到自动高度，或者何时所有内容都显示为高度。

想法？

谢谢。

首先，应该在应用新内容之前分配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';
相关文章：