不透明度的 CSS3 过渡不起作用

Question

当我尝试转换不透明度时，我遇到了转换链接的问题。否则它工作正常。没有透明度，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();

});

Answer 1

实际上，当您将transition 应用于多条规则时，您将大约同时获得n 个“结束”日志；在您的情况下 - 动画开始后 2 秒（其中 n 是应用 transition 的规则数量）。发生这种情况是因为不同 css 规则的转换被认为是不同的转换事件。

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

为了避免这种情况，您可以使用setTimeout 和动画持续时间（2s 或2000ms）调用再次触发动画的函数，并为错误留出一点空间（我做了例如2030ms）。
这是jsfiddle example（查看那里的控制台输出）。