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

Question

当我尝试过渡不透明度时，我遇到了过渡链接的问题。否则它工作正常。如果没有不透明度，控制台.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。

为了避免这种情况，你可以调用再次触发动画的函数，方法是使用动画持续时间(2 s 或 2000 ms(的setTimeout，为错误留出一点空间(例如，我把它设为 2030 ms(。
这是 jsfiddle 示例(查看那里的控制台输出(。