萬一有人遇到這個，這就是我最終做的事情（謝謝@Lynyrd?。?/p>
// transition names (found in Modernizr)
let transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd', // Saf 6, Android Browser
'MozTransition': 'transitionend', // only for FF < 15
'transition': 'transitionend', // IE10, Opera, Chrome, FF 15+, Saf 7+
};
我使用 React，所以我在 useEffect 中添加了事件偵聽器，以便在再次獲取 foodList 等時自動添加它們。
// add & remove event listeners for transition end
useEffect(() => {
foodList.forEach((item, index) => {
if (!document.getElementById(index)) return;
document
.getElementById(index)
.addEventListener(
transEndEventNames.WebkitTransition,
handleTransitionEnd
);
document
.getElementById(index)
.addEventListener(
transEndEventNames.MozTransition,
handleTransitionEnd
);
document
.getElementById(index)
.addEventListener(transEndEventNames.transition, handleTransitionEnd);
});
return () => {
foodList.forEach((item, index) => {
if (!document.getElementById(index)) return;
document
.getElementById(index)
.removeEventListener(
transEndEventNames.WebkitTransition,
handleTransitionEnd
);
document
.getElementById(index)
.removeEventListener(
transEndEventNames.MozTransition,
handleTransitionEnd
);
document
.getElementById(index)
.removeEventListener(
transEndEventNames.transition,
handleTransitionEnd
);
});
};
}, [foodList]);
我決定不嘗試根據當前瀏覽器僅添加一個事件偵聽器，但這也是可能的。請記住，每次轉換都會觸發此偵聽器。結果，當有人將鼠標懸停在其中的元素上時（觸發了工具提示），我的表格條目被刪除。所以不要忘記過濾：
function handleTransitionEnd(event) {
// only delete element for transform transition
if (!(event.propertyName === 'transform')) return;
let newState = foodList.slice();
newState.splice(event.target.id, 1);
setFoodList(newState);
}
就我而言，這很容易，因為我在元素上只有一個“變換”過渡。另外，我不知道 eventListener 的數量是否會成為較大表的性能問題?，F在根本不需要 setTimeout() 函數，在 deleteFood() 中，我現在只啟動動畫并從數據庫中刪除項目：
function DeleteFood(index) {
// animate
document.getElementById(index).style.transform = 'translate(500px, 0)';
// delete from airtable
foodList[index].destroy();
}
