節(jié)流指的避免過于頻繁的執(zhí)行一個函數(shù)，例如：一個保存按鈕，為了避免重復(fù)提交或者服務(wù)器考慮，往往需要對點擊行為做一定的限制，不然會頻繁的請求接口，之前基本上是通過js去控制節(jié)流問題，其實css也能做到節(jié)流

一、 css 實現(xiàn)思路（需要用到 pointer-events、animation以及:active）

1. 對點擊事件進行限制，也就是禁用點擊事件，利用pointer-events
   1. pointer-events 屬性用于設(shè)置元素是否對鼠標(biāo)事件做出反應(yīng)。
   2. 值：none 不做反應(yīng)auto 默認(rèn)值
2. 利用動畫animation，去改變當(dāng)前按鈕是否可點擊
3. 利用偽類 :active 觸發(fā)按鈕時機，就是點擊行為

作用：實現(xiàn)按鈕節(jié)流，利用css動畫的控制，比如一個動畫控制按鈕從禁用-》可點擊的變化，每次點擊都讓動畫重新執(zhí)行一次，就能達到節(jié)流的效果

實現(xiàn)方式：

首先利用animation寫一個禁用開啟的動畫

@keyframes cssThrottle { 
  from {
     pointer-events: none;
  }
  to {
      pointer-events: all;
  }
}

其次：把動畫綁定到按鈕上（設(shè)置延遲3s）

button {
     animation: cssThrottle 3s step-end forwards;
}

animation的 相關(guān)屬性

• step-end=》 steps(1, end)
• step-start =》 steps(1, start)

step() 表示過度的情況
比如steps(5, end)，表示把我們的動畫分成了多少等分end表示從開始的時候就執(zhí)行，最后那段被忽視，start則相反

forwards end時表示最后那一段就交給forwards處理，就是第五段

二、利用監(jiān)聽css的 transition 達到節(jié)流效果

通過:active去觸發(fā)transition變化，然后通過監(jiān)聽transition回調(diào)去動態(tài)設(shè)置按鈕的禁用狀態(tài)

button{
  opacity: .99;
  transition: opacity 2s;
}
button:not(:disabled):active{ 
  opacity: 1;
  transition: 0s;
 }

然后監(jiān)聽transition的起始回調(diào)

// 過渡開始
document.addEventListener('transitionstart', function(ev){
   ev.target.disabled = true
})
// 過渡結(jié)束
document.addEventListener('transitionend', function(ev){
   ev.target.disabled = false 
})

注意：這兩種的話，安全性不高，可以通過 ui層面去繞開

到此這篇關(guān)于利用css動畫實現(xiàn)節(jié)流的文章就介紹到這了,更多相關(guān)css 節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論