Javascript-assigned CSS animations not working? – Blancer.com Tutorials and projects

I was playing around with building a mobile web interface earlier, trying to keep things simple. I added a button that slid a fixed-position menu onto screen by assigning a class to the menu containing an animation. It looked good and seemed to be working so I added the inverse. However, when clicking to slide the menu back offscreen, the animation would not play, simply disappearing. The animation also does not play when clicking to bring the menu back onscreen after the first time.

Here’s my code. Any help understanding why this isn’t working as I expected (ie. animation should reset and play fully each time the class is reassigned) will be very helpful.


<script>

function setup(e){
 document.getElementById("menuButton").addEventListener("click", menuShow, false);
}

function menuShow(){
 var menu = document.getElementById("menu");
 if(menu.classList.contains("hiding")||
 menu.classList.contains("hidden")){
  menu.classList.add("showing");
  menu.classList.remove("hiding");
  menu.classList.remove("hidden");
 }else{
  menu.classList.add('hiding');
  menu.classList.remove('showing');
 };
}

</script>

<style>
 
#menu{
position:fixed;
color:white;
background-color:#f99;
width:100px;

#menu.showing{
 animation: 0.15s ease-out 0s 1 forwards popoutRight;
}
        
#menu.hiding{
 animation: 0.15s ease-out 0s 1 backwards popoutRight;
}
        
@keyframes popoutRight {
 from {right: -100px;}
 to {right: 0px;}
}

</style>

<body>
 <div id="menuButton">
  <h2>Show Menu</h2>
 </div>
 <ul id="menu" class="hidden">
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</body>