javascript - 具有不透明度的 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 应用于超过 1 条规则时，您将在大约同一时间获得 n 个“结束”日志；在您的情况下 - 动画开始后 2 秒(其中 n 是应用 transition 的规则数量)。发生这种情况是因为不同 css 规则的转换被认为是不同的转换事件。

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

为了避免这种情况，您可以使用 setTimeout 和动画持续时间(2 或 2000ms)，为错误留出一点空间(例如，我将其设置为 2030ms)。
这是 jsfiddle example (看看那里的控制台输出)。