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规则的转换被认为是不同的转换事件。

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

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

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

1 个答案: