5

是否可以在动画完成后使用 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 中对任何尺寸进行硬编码。有任何想法吗？

编辑：大小写错字

4

4 回答 4

7

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

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

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

brick.remove();

小提琴

于 2013-06-12T19:40:00.727 回答
1

你完全可以，只需听元素上的“transitionend”事件。请注意，事件的名称因浏览器供应商而异。完整列表请看这里。

更新：
好的，根据您的评论，我假设您希望在启动动画后立即获得结果尺寸。要记住的事情是 javascript 获取元素的大小，元素必须已经是那个大小。

我现在可以想到两种方法：

  1. 立即在子容器上应用大小更改，但为父容器设置动画。通过查看子容器的大小，您将知道结果大小。您可以在父容器上设置 overflow:hidden 以使动画过程中溢出的内容无效。请注意，“立即应用大小更改”并不意味着您根本不能应用动画，您仍然可以应用不影响大小的动画，例如淡入淡出。
  2. 构造一个与您感兴趣的相同的虚拟元素，删除该元素上的 CSS3 过渡并应用类更改，然后获取虚拟元素的大小。
于 2013-06-12T19:35:30.610 回答
0

我只想为过渡添加一个设置的毫秒数的超时。

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

如果这是你想要抓住的唯一东西，我只会这样做。如果有不止一件事发生变化，扩展它可能会变得困难

于 2013-06-12T19:31:04.647 回答
0

这个答案的灵感来自 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>

在 JS 小提琴中：http: //jsfiddle.net/qptwnq5p/

于 2015-12-15T17:42:03.033 回答