Figure out when height has changed.

by Michelle Bu

HTML

<div>Hello world</div>
<span class="height"></span>

CSS

div {
  transition: 0.00001ms line-height;
}

div {
  font-size: 16px;
  line-height: 2em;
  background-color: pink;
}


@media (max-width: 800px) {
  div {
    font-size: 20px;
    background-color: yellow;
  }
}

@media (max-width: 600px) {
  div {
    background-color: aqua;
    font-size: 30px;
  }
}

JavaScript

document.querySelector('div').addEventListener('transitionend', function(ev) {
  console.log('transitionend');
  document.querySelector('.height').innerHTML = 'height changed to ' + document.querySelector('div').offsetHeight;
});



document.querySelector('.height').innerHTML = 'height is ' + document.querySelector('div').offsetHeight;