In situations where a CSS transition is ongoing, jQuery will return the current height of an element when its dimensions are requested. However, this may not always be desired. There are many cases where it's necessary to retrieve the final dimensions that the element will have after the transition has completed but while the transition is still in progress.
Is there a reliable way to obtain the dimensions of an element during a 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>Check out this codepen example