Javascript 不透明度不工作的CSS3转换

当我尝试转换不透明度时，我遇到了转换链接的问题。否则就没问题了。如果没有不透明度，console.log将显示：

Transition no 1 started at: 1523817891340
Transition no 1 ended at: 1523817893361
Transition no 2 started at: 1523817893363
Transition no 2 ended at: 1523817895358

这是正确的近似值

现在，如果我取消注释不透明度转换，我会得到以下输出，这显然是错误的：

Transition no 1 started at: 1523818593850
Transition no 1 ended at: 1523818595856
Transition no 2 started at: 1523818595857
Transition no 2 ended at: 1523818595859
Transition no 2 ended at: 1523818597854
Transition no 2 ended at: 1523818597855

莫名其妙！请注意，第二个转换运行的时间非常短，这会引发其他问题

    ...
    <style>
        .tryDiv {
            width: 500px;
            height: 500px;
            background: red;
            display : block;
        }
    </style>
     ...
    <div class="tryDiv" ></div>
    ...
$(document).ready(function() {
  countM=1;

  /**** SET TRANSITION-END EVENT HANDLER *****/
  $('.tryDiv').on('webkitTransitionEnd oTransitionEnd transitionEnd', function() {
     console.log("Transition no " + (countM-1) + " ended at: " + new Date().getTime());
     if (countM<=2) _startTransition();
   });

   function _startTransition() {
      switch (countM) {
       case 1: var transitionVal = 'opacity 2s, transform 2s, -webkit-transform 2s';
               var css = {//opacity: 0.5, 
                 transform: 'scale(.5)','-webkit-transform': 'scale(.5)'};
                  break;
          case 2: var transitionVal = 'opacity 2s, transform 2s, -webkit-transform 2s';
                  var css = { //opacity: 1,
                     transform:'scale(1)','-webkit-transform': 'scale(1)'};
                  break;
      }

      $('.tryDiv').css('-ms-transition', transitionVal);
      $('.tryDiv').css('-webkit-transition', transitionVal);
      $('.tryDiv').css('-transition', transitionVal);
      console.log("Transition no " + countM + " started at: " + new Date().getTime());
      $('.tryDiv').css(css);
      ++countM;

   };
   /*** STARTS HERE BY EXECUTING FIRST TRANSITION ***/
   _startTransition();

});

实际上，当您将转换应用于多个规则时，您将几乎同时获得n个结束日志；在您的情况下-动画开始后2秒，其中n是应用转换的规则数量。这是因为不同css规则的转换被视为不同的转换事件

在第一个开始日志之后获得第二个结束日志的原因是，它实际上对应于第一个动画，但事件处理程序使用闭包中的变量值，因此它在那里输出2而不是1

为了避免这种情况，您可以使用setTimeout调用再次触发动画的函数，该函数的持续时间为2秒或2000毫秒，例如，我将错误设置为2030毫秒。

---

下面是控制台输出。

感谢您的回复。我不知道它为同一组转换触发多个事件，这解释了很多。但是我想避免使用setTimeout来触发下一个动画过渡集，而是确保在触发下一个动画之前，上一个动画已经完成。我猜我必须保留某种标志，可能是每个动画的对象数组，以避免重新启动同一组。正当这是一个更大的通用框架的一部分。给出的例子是一个简单的例子来解释这个问题。谢谢任何意见将不胜感激。如果您有任何解决方案或建议，请发表意见。当然，你已经回答了主要问题。