Get current CSS property value during a transition in JavaScript

var timer;

function test(e) {
    var $this;
    $this = $(this);
    timer = setInterval(function () {
        console.log($this.height());
    }, 500);
}
function untest(e) {
    clearInterval(timer);
}

$('div').mouseenter(test).mouseleave(untest);

div
{
    transition: height 10s;
    -moz-transition: height 10s;
    -webkit-transition: height 10s;
    width: 100px;
    height: 100px;
    background-color: #00F;
}

div:hover
{
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

const box = document.getElementById('box'),
      turnBlueButton = document.getElementById('turnblue'),
      turnPinkButton = document.getElementById('turnpink'),
      computedStyleValueSpan = document.getElementById('computedstylevalue');
      
turnBlueButton.onclick = () => {
  box.classList.add('blue');
  box.classList.remove('pink');
}
turnPinkButton.onclick = () => {
  box.classList.add('pink');
  box.classList.remove('blue');
}

const computedStyleObj = getComputedStyle(box);

setInterval(() => {
  computedStyleValueSpan.textContent = computedStyleObj.backgroundColor;
}, 50);

#box {
  width:50px;
  height:50px;
  transition: background-color 10s;
}
.pink {
  background: pink;
}
.blue {
  background: blue;
}

<div id="box" class="pink"></div>

<p>
  <code>getComputedStyle(box).backgroundColor:</code>
  <code><span id="computedstylevalue"></span></code>
</p>

<button id="turnblue">Turn blue</button>
<button id="turnpink">Turn pink</button>