如何让 TransitionEnd 在集合中的每个项目上工作，而不是只在最后一个项目上触发？ [复制]

Question

我需要元素进行转换（添加一个类），然后在完成所述转换后恢复（通过删除类）。这有效，但仅适用于集合中的最后一个元素（无论有多少）。如何让 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>

Answer 1

您的 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>