如果您在 div 上重復且非常快速地單擊，它將停止執行影片并且轉換類不會被洗掉。這是代碼：
let item = document.querySelector('.item');
item.addEventListener('click', function(e) {
item.classList.add('transform');
});
item.addEventListener('transitionend', function(e) {
item.classList.remove('transform');
});html,
body {
height: 100%;
margin: 0;
background-color: #0b0a10;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.item {
text-align: center;
border: 3px solid white;
font-size: 24px;
color: white;
padding: 16px;
transition: 0.2s;
}
.transform {
transform: scale(1.2);
background-color: #fe960f;
}<body>
<div class="item">
<p>1</p>
</div>
</body>我該如何解決這個問題，為什么會這樣？
uj5u.com熱心網友回復：
如果在觸發 trasitionend 事件時單擊右鍵，則會添加類影片類，但沒有新的 trasitionend 事件，因為影片已經完成。
我的建議是不要使用transitionend，而是在添加帶有洗掉類的回呼的初始影片類時設定超時。
uj5u.com熱心網友回復：
以下是MDN有關transitionend事件的說明：
當 CSS 轉換完成時會觸發 transitionend 事件。如果在完成之前移除了轉換，例如移除了轉換屬性或將顯示設定為無，則不會生成事件。
盡管您可以使用該toggle功能，如下所示：
let item=document.querySelector('.item');
item.addEventListener('click',function(e){
item.classList.toggle('transform');
});
item.addEventListener('transitionend',function(e){
item.classList.remove('transform');
});html,body{
height:100%;
margin:0;
background-color: #0b0a10;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
.item{
text-align: center;
border: 3px solid white;
font-size: 24px;
color: white;
padding: 16px;
transition: 0.2s;
}
.transform{
transform: scale(1.2);
background-color: #fe960f;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="java.js" defer></script>
<title>DESING</title>
</head>
<body>
<div class="item">
<p>1</p>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427188.html
標籤：javascript html css
上一篇：如何將壁櫥輸入欄位添加到JavaScript或Jquery中的單擊按鈕？[復制]
下一篇：D3燃盡圖的資料重繪問題