JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <aside class="animated fadeInRight">
        <ul>
            <li><a href="javascript:void(0)">Menu Item</a></li>
            <li><a href="javascript:void(0)">Menu Item</a></li>
        </ul>
    </aside>
    <main>
        <div class="padded">
            <button type="button" class="show">Show Menu</button>
            <button type="button" class="hide">Hide Menu</button>
        </div>
    </main>
</div>

CSS

.parent {
    position: relative;
}

aside {
    background: rgba(255,0,0,.5);
    position: absolute;
    width: 200px;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 1;
}

main {
    background: #4099FF;
    margin-left: 200px;
    height: 200px;
    z-index: 2;
}

main .padded {
    padding: 1em;
}



/* Animate.css */

@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
           ...

JavaScript

$(function() {
    
    var onAnimationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    
    $('button.show').click(function() {
        $('aside')
            .removeClass('fadeOutRight')
            .addClass('fadeInRight')
            .show();
    });
    
    $('button.hide').click(function() {
        $('aside')
            .removeClass('fadeInRight')
            .addClass('fadeOutRight')
            .one(onAnimationEnd, function() {
                $(this).hide();
            });
    });
});