JavaScript detects CSS animation in progress
I am having some problems in my JavaScript deciding whether to wait or not for events animationend
and wondering if there is an elegant solution to this problem.
Suppose I have a div that animates on page load and disappears, and then later on I have another script that adds a tag <img>
to the div.
I want this to <img>
be added after the animation ends to avoid stuttering during animation and just make it more enjoyable.
I currently know I can write something like this (assuming I am using animate.css):
HTML:
<div class="append-image-here animated fadeIn"></div>
JavaScript:
$(function() {
$('.append-image-here').one([
'webkitAnimationEnd',
'mozAnimationEnd',
'MSAnimationEnd',
'oanimationend',
'animationend'
].join(' '), function() {
$('<img>', { src: '/image.jpg' }).appendTo(this);
});
});
It's ok if the script runs before the animation ends and the event fires animationend
, but if the script runs after the animation ends, the tag <img>
will never be created and never added to the div (for example if the handler was set to timeout or something like that which has passed for the duration of the animation).
Is there a way to determine if CSS animation is currently working so that the script can decide whether to wait animationend
or not without relying on user added classes or data attributes?
(I am asking you not to rely on classes and attributes, because if I am working with someone else animations, I may not know the classes ahead of time)
Any help would be appreciated.
source to share
Why not just use .on()
in document and even check which animation has only ( e.target
) Event handler will be attached before the DOM and CSS animation are fully loaded.
DEMO: JSnippet Demo
Note: do not attach when the DOM is ready - $(function(){ ... })
$(document).on([
'webkitAnimationEnd',
'mozAnimationEnd',
'MSAnimationEnd',
'oanimationend',
'animationend'
].join(' '), function(e) {
//Do whatever you want
console.log(e);
$('ul').append(
"<li>Animation end detected on: "
+ e.target
+ "." + e.target.className +
"</li>"
);
});
$(function(){
$('button').click(function(){
$(this).addClass('animate');
});
});
$(document).on([
'webkitAnimationEnd',
'mozAnimationEnd',
'MSAnimationEnd',
'oanimationend',
'animationend'
].join(' '), function(e) {
//Do whatever you want
console.log(e);
$('ul').append(
"<li>Animation end detected on: "
+ e.target
+ "." + e.target.className +
"</li>"
);
$('button').removeClass('animate');
});
button {
width: 300px;
background-color: red;
}
button.animate {
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 1s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="animate">Trigger animation</button>
<ul></ul>
source to share