javascript - 所有事件CSS转换完成后jQuery计算宽度和高度

使用jQuery完成动画后，是否可以计算元素的大小？我的简化示例是:

<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>

我等不及要等到动画完成后再获得尺寸，而且无法在JS中对任何尺寸进行硬编码。有任何想法吗？

编辑:大小字的错别字

最佳答案

您可以只创建一个具有相同类且没有过渡的元素，并获取该元素的尺寸，因为这与过渡在现有元素上结束时相同:

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

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

brick.remove();

FIDDLE