我怎样才能让 TransitionEnd 处理集合中的每个项目，而不是只触发最后一个项目？

Question

我需要元素进行转换（添加 class），然后在完成所述转换后恢复（通过删除 class）。这有效，但仅适用于集合中的最后一个元素（无论有多少）。我怎样才能让 transitionEnd 在每个元素上触发，而不是只在最后一个元素上触发？

我尝试了各种超时等方法来代替 .on('webkitTransitionEnd... 到目前为止没有任何效果。

我无法按顺序触发它们，因为这会花费太长时间。有几十个需要同时开火

有没有办法将其排队，或者我完全以错误的方式接近它？

在实际应用中，文本会发生变化，循环之间会发生其他事情，这就是为什么可以只使用关键帧让它向下摆动，等待然后再向上摆动。

提前致谢，请告知我是否应该 post/phrase 以不同的方式回答这个问题。

$(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 来引用该元素，然后向其添加 class 和处理程序。

$(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>

我怎样才能让 TransitionEnd 处理集合中的每个项目，而不是只触发最后一个项目？

How can I get TransitionEnd to work on EACH item in a collection, instead of only firing on the last item?

javascript

css

jquery

css-transitions

transitionend