Div Animate Auto Height

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 на фиксированную высоту, равную высотеStart. Затем установите для переполнения значение none. Затем установите новое содержимое 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';