Ignore transitions when measuring element sizes

Question

Is there an elegant way to predict the dimension an element will have after the transition of elements has completed ?

Example:

HTML:

<div id="demo">...</div>

CSS

#demo {
  max-height: 0;
  overflow:hidden;
  transition: 2s max-height;
}

#demo.expand {
  max-height: 1000px;
}

JS:

 var demo = document.getElementById('demo');
 demo.className = 'expand';
 // Unfortunately the result will be 0px 
 // because the current height is measured
 alert(demo.offsetHeight);

Demo:

codepen

Answer 1

You can check the requested height / width of the content content using the scrollHeightand properties scrollWidth.

eg. try adding alert(demo.scrollHeight);to the js panel.

Answer 2

Is there an elegant way to measure the size that an element will have after completing the transition of elements?

transitionend, :

$('#demo').on("transitionend", function(e) { 
    console.log($('#demo').height());
}).addClass('expand');

20, , , ?
jsFiddle

Answer 3

- , . , . , .

Answer 4

#demo height: 0, , #demo, , .

JSFiddle.

( @CBroe on("transitionend", function), )

HTML

<div id="demoWrapper">
    <div id="demo">
        // content
    </div>
</div>

CSS

#demoWrapper {
    height: 0;
    overflow:hidden;
    background:red;
    transition: 2s height;
}

#demo {
    max-height: 1000px;
}

JavaScript

alert("Calculated height of #demo before transition: " + $('#demo').height());

$('#demoWrapper').height($('#demo').height()).on("transitionend", function(e) {
    $('#demoWrapper').css('height', 'auto');
});

Answer 5

, , .

Here the text enclosed in <p>seems fair to me: DEMO .