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

Last update: Dec 21, 2022

Overview

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"

Comments

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!
opened by reintroducing 4
Use standard transitionend if available

Fixes #8

When traversing the list of available styles, the standard transition should be looked for first. This fixes an issue with Opera 38 (and possibiliy others) where the webkitTransition properites exists alongside standard transition, but webkitTransitionEnd never fires (only transitionend).

opened by wytrych 3
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?

opened by hkyip 3
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?

opened by anselmbradford 1

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;
    }
}

opened by O-Zone 1

Bump ansi-regex from 5.0.0 to 5.0.1
Bumps ansi-regex from 5.0.0 to 5.0.1.

Release notes

Sourced from ansi-regex's releases.

v5.0.1

Fixes (backport of 6.0.1 to v5)

This is a backport of the minor ReDos vulnerability in ansi-regex@<6.0.1, as requested in #38.

Fix ReDoS in certain cases (#37) You are only really affected if you run the regex on untrusted user input in a server context, which it's very unlikely anyone is doing, since this regex is mainly used in command-line tools.

CVE-2021-3807

https://github.com/chalk/ansi-regex/compare/v5.0.0..v5.0.1

Thank you @yetingli for the patch and reproduction case!

Commits

a9babce 5.0.1

4657833 fix incorrect format

c3c0b3f Fix potential ReDoS (#37)

178363b Move to GitHub Actions (#35)

0755e66 Add @Qix- to funding.yml

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimatch from 3.0.4 to 3.1.2
Bumps minimatch from 3.0.4 to 3.1.2.

Commits

699c459 3.1.2

2f2b5ff fix: trim pattern

25d7c0d 3.1.1

55dda29 fix: treat nocase:true as always having magic

5e1fb8d 3.1.0

f8145c5 Add 'allowWindowsEscape' option

570e8b1 add publishConfig for v3 publishes

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
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).

opened by wytrych 0

Owner

Evandro Leopoldino Gonçalves

senior learner 🤓

GitHub

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

76.7k Jan 4, 2023

Javascript version of the Move language compiler, supports compiling Move code into Move bytecode in the browser.

move-js Javascript version of the move language compiler, supports compiling Move code into move bytecode in the browser. Features Compiling move pack

13 Dec 20, 2022

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

227 Dec 31, 2022

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

793 Dec 27, 2022

🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

256 Sep 19, 2022

Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

33 Dec 28, 2022

Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

165 Dec 12, 2022

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

4.7k Jan 4, 2023

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

Related tags

Overview

TransitionEnd

Browser Support

Installation

Methods

How does it work?

Comments

line37: 'transition': 'transitionEnd',

'transition': 'transitionend',

v5.0.1

Fixes (backport of 6.0.1 to v5)

Owner

Evandro Leopoldino Gonçalves

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Javascript version of the Move language compiler, supports compiling Move code into Move bytecode in the browser.

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Javascript and SVG odometer effect library with motion blur

🐿 Super easy and lightweight(<3kb) JavaScript animation library

Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

A lightweight JavaScript library for creating particles

GreenSock's GSAP JavaScript animation library (including Draggable).

Javascript library to create physics-based animations

Animation library that mimics CSS keyframes when scrolling.

GreenSock's GSAP JavaScript animation library (including Draggable).

A library to add a virtual Trackball to your DOM

Theatre.js is an animation library for high-fidelity motion graphics.

simple JavaScript library to animate texts

Tiny ANSI terminal coloring library

Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

Fixes (backport of `6.0.1` to v5)