内在小孩的过渡之火

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