by
82k 39
7
9
2,789
2
Top 1% !
Popular
Famous
Nice
Tagged
Easy-to-find
Specified
OpenSource
MultiPlatform
Popularity: 5540th place
Languagetypescript
libraryjquery
libraryunderscore
LicenseMIT_X11
TechnologyJQuery

Execute javascript code at the end of a CSS transition

Using JQuery you can easily bind a function to any event. CSS transitions on a given element trigger different event depending on the browser. You can capture all or write a small function that select the one working on the current browser. 

Here is how (using typescript and underscore):
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/120190/Execute-javascript-code-at-the-end-of-a-?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
function getBrowserTransitionEvent( el : JQuery ) : string { var transitions = [ { name: 'transition', value: 'transitionend' }, { name: 'OTransition', value: 'oTransitionEnd' }, { name: 'MozTransition', value: 'transitionend' }, { name: 'WebkitTransition', value: 'webkitTransitionEnd' } ]; var HTMLElement e = el.get(); var t = _.find< { name: string; value: string }>( transitions , (t) => e.style[t.name] !== undefined); return t !== undefined ? t.value : ''; } // Here is how to use this: $('#myElement').bind( getBrowserTransitionEvent($('#myElement')), function() { alert('CSS transision is complete'); });
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus