Я работаю с двумя div-компонентами, где один слева - это складной контейнер, а другой - основной контейнер, что-то вроде этого:

================================
|        |                     |
|        |                     |
|        |                     |
|  div 1 |         div 2       | 
|        |                     |
|        |                     | 
================================

Я сворачиваю div 1, используя простой класс CSS, и когда div 1 не виден, div 2 увеличивается в размере и занимает остальное пространство. Теперь мне нужно получить размер div 2, как только это будет сделано с изменением размера (которое не является мгновенным и использует переход).

Я хочу визуализировать d3 в div 2, и мне нужно знать правильные размеры div. К сожалению,

$ ( " Div2 - ID # " ) . Ширина ( )

Возвращает неопределенный результат. Я думаю, что это в основном связано с переходом. Как я могу получить правильную ширину и высоту div после изменения размера?

1
Pixelord 22 Дек 2015 в 04:37

3 ответа

Лучший ответ

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

1
Community 23 Май 2017 в 12:23

Переходное событие

Существует событие под названием transitionend. Добавление обработчика к этому событию вызовет любое действие после вашего перехода, вместо использования функции задержки

Например, нажмите на блок div с текстом «left» внутри .. Когда переход закончится, высветится ширина блока div с текстом «right».

function handler(){
if(window.getComputedStyle){
alert(window.getComputedStyle(document.getElementById('right'), 'width').width)
}
else {document.getElementById('right').currentStyle.width}
}
function click(){
document.getElementById('left').style.width='0px'

}

document.getElementById('left').addEventListener("transitionend",handler);
document.getElementById('left').addEventListener('click',click,false);
#left{
  float:left;
  transition-property:width;
  transition-duration:3s;
  border:solid;
  width:100px;
  
}
#right{
  border:solid;
  overflow:hidden;
}
<div>
<div id="left">
left
</div>
<div id="right">
ddd
</div>
</div>

Примечание Остерегайтесь

Это событие поддерживается только версиями браузера здесь.

0
repzero 22 Дек 2015 в 02:48

Я бы попробовал использовать тайм-аут с продолжительностью перехода.

var delay = 2000;
var t = setTimeout(function(){
    var width = $("#div2-id").width();
    clearTimeout(t);
}, delay);

delay в миллисекундах, поэтому предполагается, что ваш переход CSS равен 2s.

1
Donnie D'Amato 22 Дек 2015 в 01:41