The transitional fire of the inner child

Question

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>

Answer 1

Using keyframe animation requires no JavaScript at all. Just specify what the final state is and make sure to set the padding mode to forwards so the final state is not reset.

.a {
  display: grid;
  font: 2rem sans-serif;
  place-content: center;
  
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  
  left: 200px;
  opacity: 0;
  animation: slideIn .3s ease-in-out forwards;
}

.toggle {
  transition: color 0.2s;
}

.toggle:hover {
  color: #fff;
}

@keyframes slideIn {  
  to {
    opacity: 1;
    left: 0;
  }
}

  

    toggle