CSS3 keyframes animation on click (with addClass). How to restart CSS3 animation with adding css class?

Question

I have a problem. Im using Bounce.js to create nice menu animations (with some cool effects). Bounce.js using css keyframes animations which can be problematic to restart. I got menu and when I click a button and when .show class is added it should fire show animation. But when I press that button again hide class should be added with hide animation (which is just reverse version of previous animation).

Js is working (classes are adding and removing properly) but animation is fired only once - and there is no hiding animation (menu element just disappears with out animating it self).

Its a different approach. Mine is shorter and easier and it a bit different question (on class adding) — born2fr4g
– born2fr4g, Commented Jun 27, 2016 at 8:44
I don't think they are any different. Your answer doesn't look shorter to me either (refer the second snippet under the heading For toggling one animation to another). Anyway I shall leave it to the community to decide. — Harry
– Harry, Commented Jun 27, 2016 at 8:45

born2fr4g · Accepted Answer · 2016-06-27 08:35:38Z

You can do it in a serval ways.

One way is to trigger re-flow of the element before adding animation class to it.

element.offsetWidth = element.offsetWidth;

For example (vanilla JS):

if (element2.classList.contains('show')) {
      element2.classList.remove("show");
      //restarting css3 keyframe animation
      **element2.offsetWidth = element2.offsetWidth;**
      element2.classList.add("hide");
  }else{
        element2.classList.remove("hide");
      //restarting css3 keyframe animation
      **element2.offsetWidth = element2.offsetWidth;**
      element2.classList.add("show");
  }

jQuery version:

if(settingPopup.hasClass('show')){
        settingPopup.removeClass('show');
      //line below is a fix to restart css3 keyframe animation
      //settingPopup.outerWidth(settingPopup.outerWidth)
      settingPopup.outerWidth(settingPopup.outerWidth).addClass('hide');
  }else{
        settingPopup.removeClass('hide');
      //line below is a fix to restart css3 keyframe animation
      //settingPopup.outerWidth(settingPopup.outerWidth)
      settingPopup.outerWidth(settingPopup.outerWidth).addClass('show');
  }

And here is working fiddle for it: https://jsfiddle.net/zpawpvke/2/

Based on: https://css-tricks.com/restart-css-animation/

Collectives™ on Stack Overflow

CSS3 keyframes animation on click (with addClass). How to restart CSS3 animation with adding css class?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related