Rumah > Soal Jawab > teks badan
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粉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