Class toggles but re-attaches itself after the animation and class removal completes

Question

I'm trying to create a design where you click on a box, it'll slide into another view with more content, and when you click the arrow, it'll return.

The problem is this:

        $(boxes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
            boxes.parent().css({ 
                'height' : '0', 
                'opacity' : '0',
                'overflow' : 'hidden'
            });

            fboxContentCover.css({
             'height' : 'auto',
             'opacity' : '1',
            });

            fboxContentCover.removeClass('fadeOutLeft').addClass('animated bounceInRight');
        });

        $(fboxContentCover).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

            fboxContentCover.css({ 
                'height' : '0', 
                'opacity' : '0',
                'overflow' : 'hidden'
            });

            $('.fbox').parent().css({
             'height' : 'auto',
             'opacity' : '1',
            });

            $('.fbox').removeClass('fadeOutLeft').addClass('animated fadeInRight');
        });

When the first one is done, it goes to the second view successfully, however, when you click back, it'll slide into the first view again, but it'll then flash the second view again and then go back to the first view, again.

How can I stop this from happening?

The code and everything is here: https://codepen.io/anon/pen/JNodjO

When adding .toggleClass instead of .removeClass().addClass(), the animation completely stops working.

score 1 · Accepted Answer · edited May 23 '17 at 12:02

It appears that, when you click on the first set of boxes, animationend fires on those boxes, and they slide out of view.

When you click the "back button" on the second set, the animation event wired to the back button fires, and the first set of boxes come back into view. (cool so far)

But now, webkitAnimationEnd fires on the first set of boxes as they come back into view, which repeats the sliding effect again redundantly.

The fact that the timing appears different for the two events is odd, but the bottom line is the your .one() is hooking up two events that Chrome recognizes where you only want one. Using this Modernizr function:

function whichAnimationEvent() {
      var t,
          el = document.createElement("fakeelement");
      var animations = {
          "animation"      : "animationend",
          "OAnimation"     : "oAnimationEnd",
          "MozAnimation"   : "animationend",
          "WebkitAnimation": "webkitAnimationEnd"
      };
      for(t in animations) {
          if (el.style[t] !== undefined){
              return animations[t];
          }
      }
  }

like so:

 $(boxes).one(whichAnimationEvent(), function(ev) { }

seems to solve the problem, which you can check here: https://codepen.io/anon/pen/aWzaqN

Thanks! Just a question for ya! It's 2017 and it seems like these vendor prefixes has been on the animate.css github for years now. Does it even matter now to use these? Thanks for the help! — kinx, Apr 15 '17 at 22:43
https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent seems to indicate that all the browsers should recognize `animate`. — Scott Weaver, Apr 16 '17 at 21:02

Class toggles but re-attaches itself after the animation and class removal completes

1 Answers1