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>


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more