cari

Rumah  >  Soal Jawab  >  teks badan

Api peralihan anak batin

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>

P粉274161593P粉274161593236 hari yang lalu352

membalas semua(1)saya akan balas

  • P粉214176639

    P粉2141766392024-04-03 12:48:25

    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

    balas
    0
  • Batalbalas