這是最小的可重現範例。 「切換」懸停的過渡結束正在觸發(我不想要)並過早隱藏「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>
P粉2141766392024-04-03 12:48:25
使用關鍵影格動畫根本不需要 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