這個問題在這里已經有了答案： 回圈內的 JavaScript 閉包 - 簡單的實際示例 (44 個答案) 3 小時前關閉。
我需要元素進行轉換（添加一個類），然后在完成所述轉換后恢復（通過洗掉類）。這有效，但僅適用于集合中的最后一個元素（無論有多少）。如何讓 transitionEnd 在每個元素上觸發，而不僅僅是最后一個元素？
我已經嘗試了各種超時等來代替 .on('webkitTransitionEnd... 到目前為止沒有任何效果。
我不能按順序將它們關閉，因為它會花費太長時間。有幾十個需要同時發射。
有沒有辦法排隊，還是我完全以錯誤的方式接近這個？
在實際應用程式中，文本會在回圈之間發生變化和其他事情發生，這就是為什么可以使用關鍵幀讓它向下擺動，等待然后再向上擺動。
提前致謝，請告知我是否應該以不同的方式發布/措辭這個問題。
$(document).on("click", "#one", function(e) {
flipEach()
});
function flipEach(){
// itterate through an array of same-class elements and execute on each
$(".card").each(function( index ) {
// use the index to itterate through the IDs
position = "#pos_" (index 1)
// add the transition class to current item in the each/array
$( position ).addClass('flipped')
// change text and remove item on the current item in the each/array after transitionEnd
$( position ).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
// remove the class that flipped it and restore position
$( position ).removeClass("flipped");
});
});
};body {
display:flex;
align-items: center;
text-align: center;
}
.card {
width:80px;
height:120px;
margin:10px;
font-size:50px;
text-align:center;
background-color: gray;
transform-origin: 0% 100%;
}
.flipped{
transform: rotateX(-180deg);
transition-property: transform;
transition-duration: 1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="one">fipEach</button>
<div id="pos_1" class="card">1</div>
<div id="pos_2" class="card">2</div>
<div id="pos_3" class="card">3</div>
<div id="pos_4" class="card">4</div>uj5u.com熱心網友回復：
你的position變數把事情搞砸了。由于您只是嘗試使用它來參考正在迭代的當前元素，因此它完全是多余的 - 只需用于this參考該元素，然后將類和處理程式添加到該元素即可。
$(document).on("click", "#one", function(e) {
flipEach()
});
function flipEach() {
// itterate through an array of same-class elements and execute on each
$(".card").each(function() {
// add the transition class to current item in the each/array
$(this).addClass('flipped')
// change text and remove item on the current item in the each/array after transitionEnd
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
// remove the class that flipped it and restore position
$(this).removeClass("flipped");
});
});
};body {
display: flex;
align-items: center;
text-align: center;
}
.card {
width: 80px;
height: 120px;
margin: 10px;
font-size: 50px;
text-align: center;
background-color: gray;
transform-origin: 0% 100%;
}
.flipped {
transform: rotateX(-180deg);
transition-property: transform;
transition-duration: 1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="one">fipEach</button>
<div id="pos_1" class="card">1</div>
<div id="pos_2" class="card">2</div>
<div id="pos_3" class="card">3</div>
<div id="pos_4" class="card">4</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/407959.html
標籤：
上一篇：我的主JS包中包含多少節點模塊？