Last active
May 29, 2023 17:12
-
-
Save lunule/ccb05f57d76c60b8f8bcd7d3db9c524c to your computer and use it in GitHub Desktop.
[jQuery - Detect CSS3 Animations & Transitions End] #jquery #animation #transition #css #javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Using jQuery to Detect When CSS3 Animations and Transitions End | |
| * @see https://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end | |
| */ | |
| jQuery(document).ready(function($) { | |
| 'use strict'; | |
| const myButton = $('.my-button'), | |
| myBox = $('.my-box'); | |
| /** | |
| * FYKI: WITHOUT A "RUNNING INDEX", THE F***** UP CALLBACK FUNCTION WILL RUN MULTIPLE | |
| * F****** TIMES!!! | |
| * ============================================================================================ | |
| */ | |
| let effinTransitionIndex = 1, | |
| effinAnimationIndex = 1; | |
| myButton.click(function () { | |
| /** | |
| * Version 1 - CSS3 TRANSITION | |
| * =========================== | |
| */ | |
| myBox.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { | |
| /** | |
| * FYKI: WITHOUT CHECKING THE "RUNNING INDEX", THE F***** UP CALLBACK FUNCTION | |
| * WILL RUN MULTIPLE F****** TIMES!!! | |
| * ==================================================================================== | |
| */ | |
| if ( 1 === effinTransitionIndex ) { | |
| // code to execute after transition ends | |
| } | |
| /** | |
| * FYKI: WITHOUT THIS INCREMENT, THE F***** UP CALLBACK FUNCTION WILL RUN | |
| * MULTIPLE F****** TIMES!!! | |
| * ==================================================================================== | |
| */ | |
| effinTransitionIndex++; | |
| }); | |
| /** | |
| * Version 1 - CSS3 ANIMATION | |
| * ========================== | |
| */ | |
| myBox.one('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend', function(e) { | |
| /** | |
| * FYKI: WITHOUT CHECKING THE "RUNNING INDEX", THE F***** UP CALLBACK FUNCTION | |
| * WILL RUN MULTIPLE F****** TIMES!!! | |
| * ==================================================================================== | |
| */ | |
| if ( 1 === effinAnimationIndex ) { | |
| // code to execute after transition ends | |
| } | |
| /** | |
| * FYKI: WITHOUT THIS INCREMENT, THE F***** UP CALLBACK FUNCTION WILL RUN | |
| * MULTIPLE F****** TIMES!!! | |
| * ==================================================================================== | |
| */ | |
| effinAnimationIndex++; | |
| }); | |
| }); | |
| }) | |
@Alys-dev Uh, I didn't notice I've made this public!! 😳 Pardon my French, I just updated the file, it's way less vulgar now, ho!
Thanks for pointing out the PHP opening tag, a typical bad habit if you're using Lepton to manage your gists.
And I'm happy you found the code useful!! 🎉
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Interesting, I just needed to know how I would be implement a such of feature in my Discussions Hall, which use Ajax (and jQuery to animate the refresh) while a new message is incoming... But sometimes animations overlap..
Well, that's a nice try to have !
EDIT: just a little edit to say on top of your file you have a PHP tag opened 🐛