1

When requesting the dimensions of an element currently in a CSS transition, jQuery will return the current value of the element's height at the given time of when the dimensions are requested.

While this is right and well, it often isn't what's needed. I have many cases in which I'd like to retrieve the final dimensions that the element will have after the transition, but while the transition is still in progress.

How can I reliably retrieve the dimensions of an element while its still in transition?

$(document).ready(function() {
  $('#one').on('click', function() {
    $(this).addClass('trans');
    $('#output').text($(this).height());
    var self = $(this);
    setTimeout(function() {
      $('#output').text(self.height());
    }, 200);
  });
});
#output {}

#one {
  width: 200px;
  height: 200px;
  background: red;
  transition: all 1s linear;
}

#one.trans {
  height: 600px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="output">...</div>
<div id="one"></div>

See this codepen example

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
SquareCat
  • 5,699
  • 9
  • 41
  • 75
  • 1
    There's no way to know to know the future size the element will be without somehow parsing the CSS for the relevant class (which is not trivial, will not be performant, and isn't at all a workable solution). Even using `getComputedStyle()` retrieves the style at the moment the call is made, not it's projected final size. I'd suggest looking for another way to achieve whatever it is you're attempting to do. Is this solution a JS band-aid for a perceived CSS shortcoming? – Rory McCrossan Dec 09 '19 at 16:22
  • It depends why you want this. If you're changing the value with JS, you can just keep track of that value in your JS. If you're setting classes that have different values, you can grab the properties of the actual CSS class with something similar (but different) to this solution: https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript – IceMetalPunk Dec 09 '19 at 16:46

1 Answers1

0

The thing about using setTimeout is that you're forced to use a somewhat arbitrary value. You can use requestAnimationFrame, which should force the code to execute after the transition

A lot of times, you need to wait until the second animation frame, so:

requestAnimationFrame(function() {
    requestAnimationFrame(function() {
        $('#output').text(self.height());
    });
});
silencedogood
  • 3,209
  • 1
  • 11
  • 36
  • Thank you. While this can be useful, the idea is to not having to wait until the transition is complete. My usage of `setTimeout` was only for demonstration purposes. – SquareCat Dec 09 '19 at 16:19
  • Okay I see. This seems like something of a headache... You'd need to extract the value from the css file itself... Or store it in a Javascript variable that is used to define the particular css property. Or just wait a fraction of a second. – silencedogood Dec 09 '19 at 16:24
  • I see what you mean. There must be a better way. I hope there is. – SquareCat Dec 09 '19 at 16:27