Api peralihan anak batin

Question

Ini adalah contoh minimum yang boleh dihasilkan semula. Hujung peralihan tuding "togol" sedang menyala (yang saya tidak mahu) dan menyembunyikan "a" lebih awal.

Untuk menghasilkan semula suis satu klik selepas penukaran tamat.

Saya menyedari ini berlaku kerana togol berada di dalam (saya tidak dapat mengubahnya). Adakah terdapat cara untuk menghentikan penukaran apabila menukar (tanpa mengesan penukaran yang berlaku).

Ia menjadi terlalu rumit dan transitionend didapati buggy, saya lebih suka menggunakan setTimeout (yang agak tidak masuk akal untuk peralihan 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

Menggunakan animasi keyframe tidak memerlukan JavaScript sama sekali. Hanya nyatakan keadaan akhir dan pastikan anda menetapkan mod isian kepada forwards supaya keadaan akhir tidak ditetapkan semula.

.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