CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Oscar Godson
Oscar Godson

Reputation: 32716

CSS transition not working when two classes are added

Before I say anything, I looked at about a dozen SO threads including this one which you'll see the code suggested in there in my JSBin as well: Why does this CSS transition event not fire when two classes are added?

The issue is that adding two classes back to back too fast results in no transition animation whatsoever.

I'm implementing this into a legacy JS custom right click menu and making it mobile friendly with just CSS by first applying the mobile styles with .mobile-menu then an animation class of .mobile-menu-show when they long press (since there's no right click mouse button).

The transitions don't work this way though. If I add .mobile-menu on page load it's fine, but I can't because I'm adding the mobile-menu class based on how the right click menu is triggered (long press == mobile styles, right click == normal styles)

Demo code: http://jsbin.com/maxuku/edit?html,css,output

==Edit==

Hopefully to clarify, I want the menu you see at the default to go hidden (translateY(100%)) then slide up from the bottom. If you use Slack, long press on a message. Or iPhone's had this same concept here where it would slide up:

Upvotes: 1

Views: 1170

Answers (1)

S4beR
S4beR

Reputation: 1847

please change css class as below

.context-menu {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 0.25s; /* Safari */
  transition: all 0.25s;
}

.mobile-menu {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.mobile-menu-show {
  bottom: 0;
}

You can refer to animation over here https://plnkr.co/edit/t0EB5CiuwtbWHqWXvlvz?p=preview

Upvotes: 3

Related Questions