Можно ли определить конец последнего перехода CSS при запуске нескольких?

Question

Если элемент имеет более чем один из его свойств 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> 

Answer 1

Вы можете узнать количество переходов, а затем сосчитать их вниз.

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

Вид хрупким, если ваш CSS не является чистым, но, может быть, у вас есть контроль над этим

Answer 2

Да, это возможно, но немного сложнее. Вы извлекаете продолжительность (и задержку) из свойств перехода и находите ту, которая имеет наибольшее значение. Поскольку transitionEnd имеет значение свойства value (transition), теперь вам нужно сравнить это только с извлеченным свойством. Example is here. (помните, что вы должны ждать в течение 6 секунд, пока что-то не происходит)

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');