Databases
StackOverflow2013
Postsdbo
POEasy way to detect support for transitionend event without frameworks like jQuery or Modernizr?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEasy way to detect support for transitionend event without frameworks like jQuery or Modernizr?
    text
    copied!<p>Have anybody out there found a simple way of detecting whether the browser supports the transitionend event or not in vanillaJs, especially in a way that actually works in all major browsers? :(</p> <p>I have found this unanswered thread in here: <a href="https://stackoverflow.com/questions/19383319/test-for-transitionend-event-support-in-firefox">Test for transitionend event support in Firefox</a>, and quite a lot of almost working hacks.</p> <p>Right now I am bulk adding eventlisteners to all the vendor prefixes, and it kind of works out (even though I think it is a hideous approach that hurts my eyes every time I look at it). But IE8 and IE9 does not support it at all, so I need to detect those two, and treat them separately.</p> <p>I would prefer to do this without browser sniffing, and definitely without huge libraries/frameworks like jQuery</p> <p>I have made a jsfiddler snippet that illustrates my problem. There is a button that spawns a dialog. When the dialog is removed by clicking close, it is transitioned in top and opacity, and after ended transition it is supposed to display=none. But if the transitionend is never fired (like in IE8 and IE9), the dialog is never removed, making it cover the show dialog button, destroying the UX. If I could detect when transitionend is not working, I could just set the display=none when closing for those browsers.</p> <p><a href="http://jsfiddle.net/QJwzF/22/" rel="nofollow noreferrer">http://jsfiddle.net/QJwzF/22/</a></p> <pre><code>window.listenersSet = false; window.dialogShouldBeVisible = false; window.showMyDialog = function () { var myDialog = document.getElementById('dialog'), myClose = document.getElementById('close'); if (!listenersSet) { if (!window.addEventListener) { // IE8 has no addEventListener myclose.attachEvent('onclick', function () { hideMyDialog(); }); } else { myClose.addEventListener('click', function () { hideMyDialog() }); ['webkitTransitionEnd','oTransitionEnd', 'otransitionend', 'transitionend'].forEach(function (eventName) { myDialog.addEventListener(eventName, function (e) { if (e.target === myDialog &amp;&amp; e.propertyName === 'top') { // only do trigger if it is the top transition of the modalDialog that has ended if (!dialogShouldBeVisible) { myDialog.style.display = 'none'; e.stopPropagation(); } } }); }); } listenersSet = true; } myDialog.style.display = 'block'; myDialog.style.top = '15px'; myDialog.style.opacity = '1'; dialogShouldBeVisible = true; } window.hideMyDialog = function () { var myDialog = document.getElementById('dialog'), myClose = document.getElementById('close'); myDialog.style.top = '-5%'; myDialog.style.opacity = '0.1'; dialogShouldBeVisible = false; } </code></pre> <p>It is working in Opera, Firefox, Chrome and IE10, but not in IE8 and IE9 (afaik)</p> <p>If I did a bad job explaining my problem, please let me know, and I will try do a better job! :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload