jQuery Calculating Width and Height After All Active CSS Transitions Complete

Question

Is it possible to calculate the size of an element after an animation has complete using jQuery? My simplified example is:

<style>
  .brick
  {
    transition: all 0.4s ease-in-out;
  }
  .large
  {
    width: 400px;
    height: 400px;
  }
  .small
  {
    width: 200px;
    height: 200px;
  }
</style>

<script>
  $('.brick').removeClass('small').addClass('large');
  $('.brick').height(); // returns 200px but desired 400px
  $('.brick').width();  // returns 200px but desired 400px
</script>

I can't wait until after the animation completes to get the sizes and I can't hardcode any of the sizes in the JS. Any ideas?

Edit: Typo on sizes for small and large

Possible duplicate: http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes — Misiur, Jun 12 '13 at 19:28
It's not really a duplicate if the OP can't wait for the transition, as that would make the transitionEnd event irrelevant ? — adeneo, Jun 12 '13 at 19:30
I'm not sure if this also catches non-jQuery animations (transistions), but you could easily find out... http://api.jquery.com/animated-selector/ — Chris S., Jun 12 '13 at 19:31
Please clarify what you want. 400px isn't the size of the element after transitions complete. — Blazemonger, Jun 12 '13 at 19:32

score 7 · Accepted Answer · answered Jun 12 '13 at 19:40

You could just create an element with the same class and no transition, and get the dimensions of that element, as that would be the same as when the transition ends on the existing element :

var brick = $('<div />', {
                          'class':'brick large', 
                           style :'transition:none; left: -9999px;'
                         }
            ).appendTo('body');

var w = brick.height()
var h = brick.width();

brick.remove();

FIDDLE

score 1 · Answer 2 · edited May 23 '17 at 12:09

You totally can, just listen to the "transitionend" event on the element. Note the name of the event is different depending on browser vendors. For a complete list look here.

UPDATE:
Okay so based on your comment I assume you want the resulted sizes right after you initiated the animation. Things to keep in mind tho is for the javascript to fetch the size of an element, the element has to already be that size.

I can think of 2 approaches as for now:

Instantly apply the size change on the child container, but animate the parent container. You will know the resulted size by looking at the size of the child container. You can have overflow:hidden on the parent container to void content overflowing in process of the animation. Notice that "instantly apply size change' doesn't mean you can't apply animations at all, you can still apply animations only if they do not interfere with the size, for example, fadeIn.
Construct a dummy element that's identical to the one you are interested in, remove CSS3 transitions on that element and apply the class changes, then grab the size of the dummy element.

Thanks for the answer, but I can't wait till the transition is done (bottom of question). — Kevin Sylvestre, Jun 12 '13 at 20:22
@KevinSylvestre oh I see, so you want the sizes as if the element has finished animation right after you initiated the animation? — Xavier_Ex, Jun 12 '13 at 21:40

score 0 · Answer 3 · answered Jun 12 '13 at 19:31

0

I would just add a timeout with the set number of milliseconds for the transition.

setTimeout(function(){
    $('.brick').removeClass('small').addClass('large');
    $('.brick').height(); // returns 200px but desired 400px
    $('.brick').width();  // returns 200px but desired 400px
}, 400);

I would only do this if this is the only thing you are trying to grab. Expanding this might get difficult if there are more than one thing transforming

answered Jun 12 '13 at 19:31

ntgCleaner

5,865
9
48
86

Thanks for the answer, but I can't wait till the transition is done (bottom of question). – Kevin Sylvestre Jun 12 '13 at 20:23

score 0 · Answer 4 · answered Dec 15 '15 at 17:42

This answer is inspired from Adeneo's answer, but is done on the already exisitng element instead of a copy. In many cases it can be hard to make the copy to have the same content and same styling as the original element, so working on the original element is probably easier.

Here is how I modified your code example:

<style>
  .brick
  {
  }

  .transition
  {
      transition: all 0.4s ease-in-out;
  }

  .large
  {
    width: 400px;
    height: 400px;
  }

  .small
  {
    width: 200px;
    height: 200px;
  }
</style>

<div class="brick small"></div>

<script>
  $('.brick').height(); // returns 200px
  $('.brick').width();  // returns 200px

  // Apply final styling and get dimensions.
  $('.brick').removeClass('small').addClass('large');
  $('.brick').height(); // returns 400px
  $('.brick').width();  // returns 400px

  // Restore styling to what it was before measuring dimensions.
  // Note width() and/or height() must be called after restoring the
  // initial style to force layout to update. If you don't, the
  // transition won't work.
  $('.brick').addClass('small').removeClass('large');
  $('.brick').height(); // returns 200px.
  $('.brick').width();  // returns 200px.

  // Apply final styling again, but include transition.
  $('.brick').removeClass('small').addClass('large transition');
</script>

In a JS Fiddle: http://jsfiddle.net/qptwnq5p/

jQuery Calculating Width and Height After All Active CSS Transitions Complete

4 Answers4