javascript - transitionEnd event with multiple transitions, detect last transition -

transitionend event fired on transition ends first , not last, not desired behavior. workarounds?

document.queryselector('a').addeventlistener('transitionend', function(){    var time = (new date().getminutes()) + ':' + (new date().getseconds());    console.log('transitionend - ', time);  });

a{    display:block;    opacity:.5;    width:100px;    height:50px;    background:lightblue;  }  a:hover{    width:200px;    height:100px;    background:red;    transition: 4s width,     /* <-- "transitionend" should fire after */                2s height,                .5s background;    }

<a>hover me</a>

now check on chrome (i not use browser), see event gets called 3 times, 1 per transition. anyway, need fire last one, , in firefox. (i can't know how many transitions on element anyway, know last)

a bit of hacky solution might try find out css property has longest total duration. can using window.getcomputedstyle on <a> element , adding duration , delay properties.

you in regular event handler fired 3 times (it's pretty quick), or make function pre-computes property name you're looking for.

main problems approach:

• css allows use ms , s in 1 statement, might need more computing.
• it can kind of difficult predict computed style when you're changing transition style on hover, or when adding new classes before/after transition.

var getvalues = function(str) {    return str      .replace(/[a-z]/gi, "")      .split(", ")      .map(parsefloat);  };    var getmaxtransitionprop = function(el) {    var style = window.getcomputedstyle(el);    var props = style.transitionproperty.split(", ");      var delays = getvalues(style.transitiondelay);    var durations = getvalues(style.transitionduration);    var totals = durations.map(function(v, i) {      return v + delays[i];    });      var maxindex = totals.reduce(function(res, cur, i) {      if (res.val > cur) {        res.val = cur;        res.i = i;      }      return res;    }, {      val: -infinity,      i: 0    }).i;      return props[maxindex];  }    var lasteventlistenerfor = function(el, cb) {    var lastprop = getmaxtransitionprop(el);    return function(e) {      if (e.propertyname == lastprop) {        cb(e);      }    };  }    var = document.queryselector("a");  var cb = function(e) {    console.log("end");  };    a.addeventlistener("transitionend", lasteventlistenerfor(a, cb));

a {    display: block;    opacity: .5;    width: 100px;    height: 50px;    background: lightblue;    transition: 3s width,    /* <-- "transitionend" should fire after */    2s height, .5s background;  }  a:hover {    width: 200px;    height: 100px;    background: red;  }

<a>hover me</a>