CSS 的 transition 可以有雙向和單向的設定。
網路上沒有什麼資料，目前只有看到這篇：[CSS筆記] transition、transform、animation 動畫屬性
下面二個都是雙向的例子。
啟動方向跟回復方向都套用一樣的效果，transition 屬性寫在初始狀態中。
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 500px;
}Demo
https://www.yuantw.com/demo/css-transition/1.html
———
transition 屬性寫在觸發狀態，會套用在啟動方向。transition 屬性寫在初始狀態，會套用在回復方向。
/* 初始狀態 */
div {
width: 100px;
height: 100px;
background: red;
/* 回復方向 套用 */
transition: width 5s, height 5s;
}
/* 觸發狀態 */
div:hover {
width: 300px;
height: 500px;
/* 啟動方向 套用 */
transition: width 2s, height 2s;
}以文字輸入框為例，連續輸入時，不會觸發動作(比如：查詢資料庫)，要停止輸入並等待一段時間後才觸發動作。
下面的程式會在每次輸入時，清除前一個 setTimeout 並設置一個新的 setTimeout，直到停止輸入，並等待設定的秒數(這個例子是一秒)後觸發動作。
簡單的版本：
let timer;
inputText.addEventListener('input', (e) => {
clearTimeout(timer);
timer = setTimeout(() => {
showArea.textContent = e.target.value; // 要觸發的動作
}, 1000);
});Demo
https://www.yuantw.com/demo/js-debounce-1/
———
網路上的資料都是把 debounce 寫成函式：
inputText.addEventListener('input', debounce(showData));
function debounce(fn, delay = 1000) {
let timer;
// return 的 function 是 inputText.addEventListener 的 event handler
return (e) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn(e);
}, delay);
};
}
function showData(e) {
showInfo.textContent = e.target.value;
}Demo
https://www.yuantw.com/demo/js-debounce-2/
———
上面二個例子的行為是，事件連續發生，停止後，只觸發動作一次。
debounce 也可以實作成，立即觸發動作。
簡單的版本：
let timeoutID;
btn.addEventListener('click', () => {
if (!timeoutID) {
console.log(new Date());
}
clearTimeout(timeoutID);
timeoutID = setTimeout(() => {
timeoutID = null; // reset
}, 1000);
});Demo
https://www.yuantw.com/demo/js-debounce-now-1/
———
下面的程式碼是從 JavaScript30 13 – Slide in on Scroll 修改
function debounce(func, wait = 1000, immediate = true) {
let timeoutID;
return (e) => {
if (immediate && !timeoutID) {
func(e);
}
clearTimeout(timeoutID);
timeoutID = setTimeout(() => {
timeoutID = null; // reset
if (!immediate) {
func(e);
}
}, wait);
};
}Demo
https://www.yuantw.com/demo/js-debounce-now-2/
參考連結：
網頁包含三個 div。
div 的 CSS 設定：
box-sizing: border-box;
width: 300px;
height: 500px;
margin: 20px auto;
padding: 10px;
border: 5px solid #eee;每個 div 的高度為：border + padding + 內容 = 500px
第一個 div 跟第二個 div 之間的 margin + 第二個 div 跟第三個 div 之間的 margin(div 之間的 margin 會重疊)：20px + 20px
再加上第一個 div 的 margin(top) 跟最後一個 div 的 margin(bottom)：20px + 20px
全網頁高度為：20px + 500px + 20px + 500px + 20px + 500px + 20px = 1580px
JS 的部份，document.documentElement 指的是 html 元素。