Игнорировать переходы при измерении размеров элементов

Есть ли элегантный способ предсказать размерность , который будет иметь элемент после завершения перехода элементов ?

Пример:

HTML:

<div id="demo">...</div>

CSS

#demo {
  max-height: 0;
  overflow:hidden;
  transition: 2s max-height;
}

#demo.expand {
  max-height: 1000px;
}

JS:

 var demo = document.getElementById('demo');
 demo.className = 'expand';
 // Unfortunately the result will be 0px 
 // because the current height is measured
 alert(demo.offsetHeight);

Демо:

codepen

4 голоса | спросил jantimon 30 PMpWed, 30 Apr 2014 20:03:35 +040003Wednesday 2014, 20:03:35

6 ответов


0

Вы можете проверить запрашиваемую высоту /ширину рендеринга содержимого с помощью scrollHeight и scrollWidth свойства.

например. попробуйте добавить alert(demo.scrollHeight); на панель JS.

ответил BlakeGru 7 Maypm14 2014, 23:54:57
0
  

Существует ли элегантный способ измерения размера, который будет иметь элемент после завершения перехода элементов?

Вы можете использовать transitionend событие для просмотра высоты вашего элемента после завершения перехода:

$('#demo').on("transitionend", function(e) { 
    console.log($('#demo').height());
}).addClass('expand');

Это даст вам значение 20, которое, как я предполагаю, является тем, что вы ищете?
jsFiddle

ответил CBroe 30 PMpWed, 30 Apr 2014 21:50:12 +040050Wednesday 2014, 21:50:12
0

Если бы я пытался сделать что-то подобное, я бы просто получил высоту содержащего элемента. Если это окно, возьми это. Это должно дать вам номер, который вы ищете до анимации каждый раз.

ответил mcphersonjr 2 Maypm14 2014, 23:02:18
0

Вы можете поместить #demo в оболочку с height: 0, который позволит автоматически рассчитать высоту, затем перевести оболочку в соответствие с высотой #demo, а затем в конце перехода измените высоту оболочки на auto, чтобы она текла как обычно.

Вот JSFiddle для демонстрации.

(Благодарим @CBroe за on("transitionend", function), о котором я не знал)

HTML

<div id="demoWrapper">
    <div id="demo">
        // content
    </div>
</div>

CSS

#demoWrapper {
    height: 0;
    overflow:hidden;
    background:red;
    transition: 2s height;
}

#demo {
    max-height: 1000px;
}

JavaScript

alert("Calculated height of #demo before transition: " + $('#demo').height());

$('#demoWrapper').height($('#demo').height()).on("transitionend", function(e) {
    $('#demoWrapper').css('height', 'auto');
});
ответил Trevin Avery 2 Maypm14 2014, 23:33:13
0

содержимое также имеет высоту, и если оно заключено в тег, вы можете легко получить его.

Здесь текст, заключенный в <p>, который мне кажется справедливым: DEMO .

ответил G-Cyr 3 Maypm14 2014, 15:53:33
0

Ответ BlakeGru отлично подходит для вопроса ОП, но не для аналогичных проблем, с которыми я столкнулся. Для полноты и в случае, если это полезно для других, вот общая стратегия поиска окончательных измерений, которые элемент будет иметь после завершения любых переходов до того, как эти переходы действительно начнутся.

Этот пример изменяет ширину элемента (с переходом) и получает высоту (которая определяется автоматически содержимым), которую элемент будет иметь после завершения перехода.

function resize(element, endingWidth) {
  // First, save any set transitions for later.
  var transitions = window.getComputedStyle(element).transition;
  // Now, disable any transitions so that our calculations will work properly.
  element.style.transition = 'none';
  // Get our current width.
  var startingWidth = element.offsetWidth + 'px';

  // Set a new width.
  element.style.width = endingWidth;
  // And get the element height. Because there are no transitions set, this will be the same height as at the end of any transitions.
  var endingHeight = element.offsetHeight;

  /*
   * Now do whatever calculations we want with the ending height.
   */
  alert(endingHeight);

  // Set the element's width back to when we started, so we have a start point for our transition.
  element.style.width = startingWidth;
  // Force the browser to recalculate the element's dimensions. This seemingly pointless call is absolutely critical for the transition to work.
  element.offsetWidth;

  // Now, we can set our desired transitions and the ending width again, and we're away.
  element.style.transition = transitions;
  element.style.width = endingWidth;
}

Fiddle

Общая идея такова:

  • Удалить все переходы.
  • Внесите необходимые изменения в размеры элемента.
  • Измерьте все необходимые размеры.
  • Сбросьте размеры элемента до начальных значений.
  • Восстановите переходы.
  • Внесите нужные изменения еще раз.
ответил leeman 1 J000000Sunday18 2018, 14:11:08

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132