Html 当多个CSS转换正在运行时，是否可以检测到上一个CSS转换的结束？

如果一个元素更改了多个css属性，并且它们具有不同的转换持续时间，是否有方法检测最后/最长运行转换的完成情况

例如：

<style>
.box {
    width: 100px;
    height: 100px;
    transition: width 0.5s, height 6s;
}

.animate {
    width: 400px;
    height: 400px;
}
</style>

<div class="box"></div>

<script>

  // I want to run some code after both the width and height transitions
  // are complete

  // Listening for transitionend events will fire on every transition 
  // that ends. So in this case, both width and height. Assume I don't 
  // know how many properties are being transitioned.
  $('.box').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(ev) {
       // ...
  });
  $('.box').addClass('animate');

</script>

.盒子{
宽度：100px；
高度：100px；
过渡：宽度0.5s，高度6s；
}
.制作动画{
宽度：400px；
高度：400px；
}
//我想在宽度和高度转换之后运行一些代码
//完整
//监听transitionend事件将在每次转换时触发
//到此为止。所以在这种情况下，宽度和高度都是。假设我没有
//知道有多少属性正在转换。
$（'.box'）。在（'transitionend WebKittTransitionEnd oTransitionEnd oTransitionEnd oTransitionEnd MSTransitionEnd'，函数（ev）上{
// ...
});
$（'.box'）.addClass（'animate'）；

您可以找出转换的数量，然后倒计时

var box = document.getElementsByClassName('box')[0];
numTransitions = getComputedStyle(box).transition.split(',').length;

---

如果你的CSS不干净，可能会有点脆弱，但也许你可以控制它

是的，这是可能的，但有点棘手。您可以从转换属性中提取持续时间（和延迟），并找到具有最高值的持续时间。由于transitionEnd具有（transition）propertyName值，现在只需将其与提取的属性进行比较。 （请注意，您必须等待6秒钟，直到发生某些事情）

函数getMaxTransitionDuration（el）{ //用于提取值的小助手 函数提取（str）{ 返回str .替换（/[A-Z]/gi，“”） .拆分（“，”） .地图（浮动）； }; //获取当前样式 var style=getComputedStyle（el）； //获取所有转换属性 var props=style.transitionProperty.split（“，”）； //我们需要延迟和持续时间 变量延迟=提取（style.transitionlay）； var持续时间=提取（风格转换持续时间）； //结合延迟和持续时间 var总计=持续时间.map（函数（v，i）{ 返回v+延迟[i]； }); //查找具有最长值的属性 var max=总计[0]； var-maxIndex=0； 对于（变量i=1；i最大值）{ maxIndex=i； 最大值=总计[i]； } } //并归还此财产 返回道具[maxIndex]； } $（'.box'）。on（'transitionend'，函数（ev）{ var lastProp=getMaxTransitionDuration（此）； 如果（ev.originalEvent.propertyName==lastProp）{ //我们到了。。。。。 } }); $（'.box'）.addClass（'animate'）；

---

在监听

transitionstart

时通过添加转换创建一个列表，然后在

transitionend

触发时删除它们…可以认为是丑陋的，但对于我所需要的（不挑剔反应时间），它是完美的，因为我可以概括它：一个JS插件Interval函数，相对较慢（250ms），可以调用它来查看一个或多个CSS属性，查看它们是否仍在更改（存储值）并抛出多个CSS属性callbacks@MikeMcCaughan看起来transitionstart还不在规范中，x-browser支持也不那么热门。不过，我喜欢您介绍的模式，前提是我能够始终如一地使用x-browser。您的示例在某些可传递属性未更改的情况下不起作用。例如，过渡：颜色1s，宽度2s，高度3s。然后添加一个仅更改宽度和高度的类。不过，您的解决方案越来越接近了。您可以通过CSSOM查找类的定义（假设您正在使用一个类）来查找正在转换的属性。我想问题是，您需要知道转换何时结束。与仅仅设置1s超时相反？@StephenThomas最后，我可能会选择在JS中指定持续时间并使用超时。但我很好奇是否有一种相对轻且防弹的方法来处理这个问题。听起来可能不是这样。@MikeMcCaughan我不知道您可以查找类定义！尼托。对于我的用例来说，这可能有点过头了，但知道这是可行的还是好的。这种查找技术的许多例子都是如此：考虑转换延迟的额外点数！现在测试代码。如果某些可转换属性没有更改，那么您的示例将无法工作。例如，过渡：宽度1s，高度2s，颜色3s。然后添加一个只更改宽度和高度的类。我们在另一个答案的评论中讨论了查找类正在更改的属性的可能性。这是相当复杂的！非常感谢你回答中的细节。如果您想添加一个关于我上面提到的用例的注释，如果它不起作用，我可以接受它。或者，如果你想尝试解决这个问题，那就去做吧@LokeshDhakar我明白了我的意思，我玩弄了代码，得出了以下结论：。只要您添加了一个类，这似乎是可行的，但是如果您删除了一个类，那么它就会失败，而且它会变得越来越大。一种更简单的方法是使用一些数据属性，其中包含将要操作哪些属性的信息。不是完全通用的，但可能比扫描复杂的样式表更方便，这是可能的，但代价昂贵，并且应该在这个事件处理程序之外完成。

function getMaxTransitionDuration(el) {
    // small helper to extract the values
    function extract(str) {
        return str
          .replace(/[A-Z]/gi, "")
          .split(", ")
          .map(parseFloat);
    };
  // get the current style
  var style = getComputedStyle(el);
  // get all transition properties
  var props = style.transitionProperty.split(", ");
  // we need delay and duration
  var delays = extract(style.transitionDelay);
  var durations = extract(style.transitionDuration);

  // combinate delay and duration
  var totals = durations.map(function(v, i) {
    return v + delays[i];
  });

  // find the property with longest value
  var max = totals[0]; 
  var maxIndex = 0;
  for (var i = 1; i < totals.length; i++) {
    if (totals[i] > max) {
      maxIndex = i;
      max = totals[i];
    }
  }
  // and return this property
  return props[maxIndex];
}

$('.box').on('transitionend', function(ev) {
    var lastProp = getMaxTransitionDuration(this);
    if (ev.originalEvent.propertyName == lastProp) { 
      // here we are.....
    }
});

$('.box').addClass('animate');