Ignore transitions when measuring an elements dimensions

Question

Is there an elegant way to predict the dimension an element will have after the elements transition is complete?

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

Is there an elegant way to measure the dimension an element will have after the elements transition is complete?

You can use the transitionend event to look at the height of your element after the transition is finished:

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

This will get you a value of 20, which I assume is what you are looking for?
jsFiddle

Answer 2

BlakeGru's answer works great for the OP's question, but doesn't work for similar problems that I've encountered. For completeness, and in case it's useful for others, here is a general strategy for finding the final dimensions an element will have once any transitions have been completed, before said transitions actually begin.

This example changes the width of an element (with a transition) and gets the height (which is determined automatically by content) that the element will have once the transition has finished.

function resize(element, endingWidth) {
  // First, save any set transitions for later.
  var transitions = window.getComputedStyle(element).transition;
  // Now, disable any transitions so that our calculations will work properly.
  element.style.transition = 'none';
  // Get our current width.
  var startingWidth = element.offsetWidth + 'px';

  // Set a new width.
  element.style.width = endingWidth;
  // And get the element height. Because there are no transitions set, this will be the same height as at the end of any transitions.
  var endingHeight = element.offsetHeight;

  /*
   * Now do whatever calculations we want with the ending height.
   */
  alert(endingHeight);

  // Set the element's width back to when we started, so we have a start point for our transition.
  element.style.width = startingWidth;
  // Force the browser to recalculate the element's dimensions. This seemingly pointless call is absolutely critical for the transition to work.
  element.offsetWidth;

  // Now, we can set our desired transitions and the ending width again, and we're away.
  element.style.transition = transitions;
  element.style.width = endingWidth;
}

Fiddle

The general idea is:

• Remove any transitions.
• Make the desired changes to the element's dimensions.
• Measure whatever final dimensions are required.
• Reset the element's dimensions to the initial values.
• Reinstate the transitions.
• Make the desired changes again.

Answer 3

You can check the requested rendering height/width of content through the scrollHeight and scrollWidth properties.

e.g. try adding alert(demo.scrollHeight); to the JS pane.

Answer 4

If I were trying to do something like this I would just get the height of the containing element. If that be the window, get that. This should get you the number your looking for prior to animation every time.

Answer 5

You can put #demo in a wrapper with height: 0, which will allow the auto height to calculate, then transition the wrapper to match the height of #demo, then on transition end, change the wrapper height to auto so it will flow just like normal.

Here is a JSFiddle to demonstrate.

(Credit to @CBroe for the on("transitionend", function) which I didn't know about)

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 6

content has an height too and if it is wrap into a tag, you can easily retrieve it .

Here text wrapped in a <p>, wich seems fair to me: DEMO.