內在小孩的過渡之火

Question

這是最小的可重現範例。 「切換」懸停的過渡結束正在觸發（我不想要）並過早隱藏「a」。

要在轉換結束後重現點選切換。

我意識到這種情況正在發生，因為切換位於 a 內部（我無法更改它）。有沒有辦法在切換時停止轉換（不偵測發生了哪個轉換）。

它變得太複雜了，發現transitionend有bug，我寧願使用setTimeout（這對於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

使用關鍵影格動畫根本不需要 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