Issue #2 - Fixed (Class name duplication on Scolling)

[abhinavdabral]

Added a simple condition to check if the className has already been added before, if not, then it shall proceed and append the class names to the element.

[afshinm]

hey @abhinavdabral, thanks for this.

first of all, the animated css class should be removed after adding. secondly, there is a active flag to check if the animated has been processed or not so there is no need to use indexOf.

Closing this PR and just ping me if you think you can alter this in a better way.

[abhinavdabral]

Thank you for your response,

I agree that it was not a very good fix. It was more of a workaround. I've had time to fiddle around further and I was able to find the bug.

The thing is that none of these fire on infinite class 'webkitAnimationEnd', 'mozAnimationEnd', 'MSAnimationEnd', 'oanimationend', 'animationend'

Because of the obvious reason : It's an infinite animation.

I've found a way to fix it (that is not a workaround) but still adds extra few lines of code.

Adding the following code, right after where the className property is appended with "animated" fixes everything.

if(element.event[e].animation.toLowerCase().indexOf("infinite")>-1){
            element.event[e].active=true;
            continue;
}

Alternative approach, is setting another event of animationiteration that fires up when the second iteration starts. But then again, you will have to check if the element has infinite attached to it, in which case, removal of class will break the expected functionality (no class, no infinite animation) and you'll have to skip doing that particularly for infinite animations, which sounds like a lot of work.

Let me know if you'd like me to send a pull request.

[afshinm]

ah yeah sorry I forgot we had infinite animations!

that fix is great @abhinavdabral, yeah please go ahead. we can discuss more about the details on that PR but the general idea looks great.