title: CSS transition not working when two classes are added
body: <p>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: <a href="https://stackoverflow.com/questions/24513581/why-does-this-css-transition-event-not-fire-when-two-classes-are-added">Why does this CSS transition event not fire when two classes are added?</a></p>
  
  <p>The issue is that adding two classes back to back too fast results in no transition animation whatsoever.</p>
  
  <p>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 <code>.mobile-menu</code> then an animation class of <code>.mobile-menu-show</code> when they long press (since there's no right click mouse button).</p>
  
  <p>The transitions don't work this way though. If I add <code>.mobile-menu</code> on page load it's fine, but I can't because I'm adding the <code>mobile-menu</code> class based on <em>how</em> the right click menu is triggered (long press == mobile styles, right click == normal styles)</p>
  
  <p>Demo code: <a href="http://jsbin.com/maxuku/edit?html,css,output" rel="nofollow noreferrer">http://jsbin.com/maxuku/edit?html,css,output</a></p>
  
  <p>==Edit==</p>
  
  <p>Hopefully to clarify, I want the menu you see at the default to go hidden (<code>translateY(100%)</code>) 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:</p>
  
  <p><img src="https://i.stack.imgur.com/jqbMT.jpg" alt=""></p>