已解決430363個問題，去搜搜看，總會有你想問的

如何通過 JS 檢測 CSS 過渡狀態并跳過它

首頁猿問如何通過 JS 檢測 CSS...

如何通過 JS 檢測 CSS 過渡狀態并跳過它

JavaScript

慕標琳琳 2023-04-14 15:34:27

考慮這樣的 div：<div id="someid"></div>它的風格：#someid { transition: background-color 10s ease; background-color: #FF0000; height: 100px; width: 100px;}#someid:hover { background-color: #FFFFFF;}#someid如果可能的話，我希望有可能通過 JS 和/或結束動畫檢測狀態（當前是否正在設置動畫）。我已經從這個答案中嘗試過一件事：document.querySelector("#someid").style.transition = "none";但它不適用于當前的動畫元素。關鍵是我需要檢測元素現在是否正在動畫，如果是，等待動畫結束或立即結束，否則什么也不做我已經找到了 transitionend事件，但是使用它我無法檢測到元素目前是否正在動畫。

查看完整描述

1 回答

一只斗牛犬

TA貢獻1784條經驗獲得超2個贊

您可以收聽過渡事件并按需將其刪除：

const el = document.getElementById('transition');

let isAnimating = false;

el.addEventListener('transitionstart', function() {

isAnimating = true;

});

el.addEventListener('transitionend', () => {

isAnimating = false;

});

el.addEventListener('transitioncancel', () => {

isAnimating = false;

});

function removeTransition(checkIfRunning) {

if (checkIfRunning && !isAnimating) {

return;

}

el.style.transition = "none";

}

#transition {

width: 100px;

height: 100px;

background: rgba(255, 0, 0, 1);

transition-property: transform background;

transition-duration: 2s;

transition-delay: 1s;

}

#transition:hover {

transform: rotate(90deg);

background: rgba(255, 0, 0, 0);

}

<div id="transition">Hello World</div>

<br />

<button onclick="removeTransition(false)">Remove Transition</button>

<br />

<button onclick="removeTransition(true)">Remove Transition on if running</button>

反對回復 2023-04-14

1 回答
0 關注
155 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何通過 JS 檢測 CSS 過渡狀態并跳過它

如何通過 JS 檢測 CSS 過渡狀態并跳過它

1 回答

添加回答