Le feu transitionnel de l'enfant intérieur

Question

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>

Answer 1

L'utilisation de l'animation par images clés ne nécessite aucun JavaScript. Spécifiez simplement quel est l'état final et assurez-vous de définir le mode de remplissage sur forwards afin que l'état final ne soit pas réinitialisé.

.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