jQuery method will trigger and reset all animations on any element with a transition CSS property.

[sambunting]

I'm using the provided example in the documentation.

$.fn.extend({
    animateCss: function(animationName, callback) {
        var animationEnd = (function(el) {
            var animations = {
                animation: 'animationend',
                OAnimation: 'oAnimationEnd',
                MozAnimation: 'mozAnimationEnd',
                WebkitAnimation: 'webkitAnimationEnd',
            };

            for (var t in animations) {
                if (el.style[t] !== undefined) {
                    return animations[t];
                }
            }
        })(document.createElement('div'));

        this.addClass('animated ' + animationName).one(animationEnd, function() { 
            $(this).removeClass('animated ' + animationName);

            if (typeof callback === 'function') callback();
        });

        return this;
    },
});

However... any element, regardless of if it has any classes associated with Animate.css that has a transition property in CSS will trigger this method, reseting all animations.

What I'm wondering if it would be possible to add some form of "blacklist" in the method where if an transition element were to fire on an element that has no reference to Animate.css, once it ends, it wouldn't reset everything else on the page. I should also mention that this will only happen once as well. As in, it resets everything, but then never does it again no matter how many times the transition is used until the user reloads the page.

Does anyone have any suggestions? How would I go about dealing with this sort of problem?

Thanks.

[warengonzaga]

hello @sambunting! Thanks for taking time to report this issue... can you please provide a codepen for this one. We will help you better if we can replicate the issue and we will look into it. I understand your question and your issue but for me, it will be fixed based on ID you use to trigger. It will possibly stop all the elements with animation because it uses a class. I think you need to specify it. Please let us know if you can replicate the issue. Thanks!

[sambunting]

Hi, got a bit of an update for you. I've spent all morning trying to figure out what was wrong and I think it is because of another library. I attempted to reproduce the issue in a Codepen, but I couldn't reproduce it. The library causing the issue is OnePageScroll. It fires the afterScroll method several times for different pages for some reason. I'm going to open an issue over there with an solution I found.

I did try regardless adding some form of if statement to Animate.css's method where it checks if the element is equal to a specific value not to execute.

I'm closing this simply as I can't seem to find a solution to do it, I understand that someone else may have the same sort of problem though.

[warengonzaga]

@sambunting alright thanks for your time to figuring it out. If you need help from Animate.css community please let us know. We are here to fix every issue caused by animate.cs. We proactively fix any issue may encounter by our users. Alright!