Javascript jQuery在所有活动CSS转换完成后计算宽度和高度

是否可以使用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>

.砖
{
过渡：所有0.4缓进缓出；
}
.大
{
宽度：400px；
高度：400px；
}
小的
{
宽度：200px；
高度：200px；
}
$（'.brick'）.removeClass（'small'）.addClass（'large'）；
$（'.brick'）.height（）；//返回200px，但需要400px
$（'.brick'）.width（）；//返回200px，但需要400px

我不能等到动画完成后才能得到尺寸，也不能硬编码JS中的任何尺寸。有什么想法吗

---

编辑：键入大小的字体

我只需为转换添加一个设置毫秒数的超时

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

---

如果这是你唯一想抓住的东西，我才会这么做。如果有不止一件事情需要转换，扩展它可能会变得困难。您完全可以，只需听元素上的“transitionend”事件。注意：事件的名称因浏览器供应商而异。查看完整的列表

更新：
好的，根据你的评论，我假设你想要在你开始动画后得到的尺寸。要记住的是，javascript要获取元素的大小，元素必须已经达到该大小

目前我可以想到两种方法：

立即在子容器上应用大小更改，但设置父容器的动画。通过查看子容器的大小，您将知道结果大小。可以在父容器上隐藏溢出：以避免动画过程中溢出的内容。请注意，“立即应用大小更改”并不意味着您根本无法应用动画，您仍然可以仅在动画不影响大小的情况下应用动画，例如，fadeIn

构造一个与您感兴趣的元素相同的虚拟元素，删除该元素上的CSS3转换并应用类更改，然后获取虚拟元素的大小

---

您可以创建一个具有相同类且没有转换的元素，并获取该元素的维度，因为这与转换在现有元素上结束时的维度相同：

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

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

brick.remove();

var brick=$（''{
'class'：'brick-large'，
样式：'transition:none；left:-9999px；'
}
).附于（“主体”）；
var w=砖块高度（）
var h=brick.width（）；
砖块。移除（）；

---

这个答案的灵感来自Adeneo的答案，但它是在已经存在的元素上而不是在副本上完成的。在许多情况下，很难使副本具有与原始元素相同的内容和样式，因此使用原始元素可能更容易

下面是我如何修改您的代码示例：

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

.砖
{
}
.过渡
{
过渡：所有0.4缓进缓出；
}
.大
{
宽度：400px；
高度：400px；
}
小的
{
宽度：200px；
高度：200px；
}
$（'.brick'）.height（）；//返回200px
$（'.brick'）.width（）；//返回200px
//应用最终样式并获取尺寸。
$（'.brick'）.removeClass（'small'）.addClass（'large'）；
$（'.brick'）.height（）；//返回400px
$（'.brick'）.width（）；//返回400px
//将样式恢复到测量尺寸之前的状态。
//注意：还原后必须调用width（）和/或height（）
//初始样式强制布局更新。如果不更新，则
//过渡不起作用。
$（'.brick'）.addClass（'small'）.removeClass（'large'）；
$（'.brick'）.height（）；//返回200px。
$（'.brick'）.width（）；//返回200px。
//再次应用最终样式，但包括过渡。
$（'.brick'）.removeClass（'small'）.addClass（'large transition'）；

在JS小提琴中：

---

可能的重复：如果OP不能等待转换，那么它就不是真正的重复，因为这会使transitionEnd事件不相关？我不确定这是否也会捕获非jQuery动画（转换），但你可以很容易地找到…请澄清你想要什么。400px不是转换完成后元素的大小。@Blazemonger哇！我的CSS中有输入错误。我修复了它。谢谢你的回答，但我不能等到转换完成（问题的底部）@KevinSylvestre哦，我明白了，所以你想要的大小就像你启动动画后元素已经完成动画一样？正确（我正在尝试同时运行另一个动画）。谢谢你的回答，但我不能等到转换完成（问题的底部）。