animationComplete() fails to fire when CSS is turned off for accessibility.

Question

I have a simple function that listens to a div so that when the animation is complete, it renders some elements on the page with backbone. but for simplicity, Here is an example:
$("#main").animationComplete(function () {
    console.log("show some content");
});
If you turn off CSS in any browser (for 508 compliance testing) this event listener never fires so my content is never shown to the user. My question, is there an alternative to animationComplete that waits for one or another? or to check if CSS is disabled?
Regards,
Joshua Eagle
www.eagle-js.com

Joshua Eagle · Accepted Answer

As I wrote this up, I just solved it. What I decided to do is to check the header for a changed background color. I know that my header has a certain color and as long as it is not white, that it should continue with listening for animation complete. If not, then create a promise on the div and fire when it's ready to do so. For example:
Not sure how this will be formatted... This is just a simple example of what I was trying to do.
if ($("#header").css("background-color") === "rgba(0, 0, 0, 0)") {
   $("div").promise().done(function() {
      console.log("css is disabled");
   });
} else {
   $("div").animationComplete(function () {
      console.log("css is enabled");
   });
}
Here's a gist for readability.
"https://gist.github.com/eaglejs/31573db36dbb0fcbe5e1"
Keep in mind, I feel this is most certainly a hack more than a legitimate fix, but I am totally open to suggestions.

Welcome to the Treehouse Community

Looking to learn something new?

Joshua Eagle

Joshua Eagle

animationComplete() fails to fire when CSS is turned off for accessibility.

1 Answer

Joshua Eagle

Joshua Eagle

Not sure how this will be formatted... This is just a simple example of what I was trying to do.