Das Übergangsfeuer des inneren Kindes

Question

Dies ist ein minimal reproduzierbares Beispiel. Das Übergangsende des „Toggle“-Hovers ist das Auslösen (was ich nicht möchte) und das vorzeitige Ausblenden des „a“.

Um den Ein-Klick-Schalter nach Abschluss der Konvertierung zu reproduzieren.

Mir wurde klar, dass das passierte, weil sich der Schalter in einem befand (ich konnte ihn nicht ändern). Gibt es eine Möglichkeit, die Konvertierung beim Umschalten zu stoppen (ohne zu erkennen, welche Konvertierung stattgefunden hat)?

Es wird zu kompliziert und es stellt sich heraus, dass Transitionend fehlerhaft ist. Ich würde lieber setTimeout verwenden (was für CSS-Übergänge etwas lächerlich ist).

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

使用关键帧动画根本不需要 JavaScript。只需指定最终状态是什么，并确保将填充模式设置为forwards，这样最终状态就不会重置。

.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