This is a minimal reproducible example. The transition end of the "toggle" hover is firing (which I don't want) and hiding the "a" prematurely.

To reproduce the click switch after the conversion is completed.

I realize this is happening because the toggle is inside a (I can't change it). Is there a way to stop the conversion when switching (without detecting which conversion occurred).

It gets too complicated and transitionend is found to be buggy, I'd rather use setTimeout (which is a bit ridiculous for css transitions).

var a = document.querySelector('.a')
a.style.display = 'block'
setTimeout(function() {
  a.classList.add('visible')
}, 50)

document.querySelector('.toggle').addEventListener('click', function() {
  console.log('click')
  a.addEventListener('transitionend', function cb(e) {

    console.log('end')
    a.style.display = 'none'

  })
  a.classList.remove('visible')

})

.a {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  left: 200px;
  display: none;
  transition: left 1s;
}

.visible {
  left: 0;
}

.toggle {
  transition: color 0.2s;
}

.toggle:hover {
  color: #fff;
}

<div class="a">
  <div class="toggle">
    toggle
  </div>
</div>