搜尋

首頁  >  問答  >  主體

內在小孩的過渡之火

這是最小的可重現範例。 「切換」懸停的過渡結束正在觸發(我不想要)並過早隱藏「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粉274161593P粉274161593240 天前360

全部回覆(1)我來回復

  • P粉214176639

    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

    回覆
    0
  • 取消回覆