Il s’agit d’un exemple minimal reproductible. L'extrémité de transition du survol "bascule" se déclenche (ce que je ne veux pas) et cache le "a" prématurément.

Pour reproduire le commutateur en un clic une fois la conversion terminée.

J'ai réalisé que cela se produisait parce que la bascule était à l'intérieur d'un (je ne pouvais pas la changer). Existe-t-il un moyen d'arrêter la conversion lors du changement (sans détecter quelle conversion a eu lieu).

Cela devient trop compliqué et transitionend s'avère buggé, je préfère utiliser setTimeout (ce qui est un peu ridicule pour les transitions css).

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>