evandrolg / transitionend Goto Github PK

View Code? Open in Web Editor NEW

95.0 5.0 8.0 236 KB

:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

CSS 7.90% HTML 57.20% JavaScript 34.90%

transitionend javascript agnostic transitionend-event

transitionend's Introduction

TransitionEnd

TransitionEnd is an agnostic and cross-browser library to work with event transitionend.

Browser Support


1.0+ ✔	4.0+ ✔	10+ ✔	10.5 ✔	3.2+ ✔

Installation

To install Selecting, execute:

  npm install transitionEnd

Or Bower too:

  bower install transitionEnd

Or simply pick up the file from src directory.

Methods

transitionEnd(element).bind(callback)
transitionEnd(element).unbind()
transitionEnd(element).whichTransitionEnd()

How does it work?

var box = $("#box"); // or document.getElementById("box")
var foo = $("#foo");

transitionEnd(box).bind(function(){
	foo.addClass("on");
	transitionEnd(box).unbind();
});

var transition = transitionEnd(box).whichTransitionEnd(); // return for example "webkitTransitionEnd"

transitionend's People

Contributors

Stargazers

Watchers

Forkers

bcbock zauberfisch annikalichtenstein-twt claudiocalautti anselmbradford davidstrada ajunlonglive imjacobchen

transitionend's Issues

TransitionEnd did not fire for IE11

I have problem to trigger transitionEnd for IE. I believe IE use the transitionend instead of transitionEnd
transintionend_poly.js

line37: 'transition': 'transitionEnd',

then after I changed it to

'transition': 'transitionend',

It starts to work for IE. Any ideas?

Move jquery to test directory?

Since https://github.com/EvandroLG/transitionEnd/blob/master/src/jquery.js appears to only be used in the tests, perhaps it should be moved to test/js/jquery.js?

Not working in Opera 38

It seems like this polyfill doesn't work properly with Opera 38. It detects that it should be using webkitTransitionEnd but that event never fires (only transitionend does).

Can you publish transitionEnd on bower?

Use of Array.indexOf makes IE8 go sour.

First of all, thanks for a great and focused tool I really needed. :)

In transitionEnd_full.js line 83 you use Array.indexOf, which IE8 does not have by default.

If you want IE8 to continue execution after that line, either use a polyfill like this:

Array.prototype.indexOf = function(obj, start) {
     for (var i = (start || 0), j = this.length; i < j; i++) {
         if (this[i] === obj) { return i; }
     }
     return -1;
}

or rewrite line 83:

positonElement = this.list.indexOf(element);

to something like:

positonElement = -1;
for (var i=0; i < this.list.length; i++) {
    if (this.list[i] === element) {
        positonElement = i;
        break;
    }
}

Two questions...

Hi, great little utility you have here. I have two questions:

Can you list browser support in the readme? It's not immediately clear how far back the support goes in IE. Some polyfills only support unifying the event but not older browsers. What is the support for this one?
Is it possible to publish this on npm? Would love to use it and manage updates through our npm ecosystem setup in the project.

Thanks for your hard work on this!