JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.css">
    <div ng-controller="controller">
      <button ng-click="showme = !showme">Show or Hide</button>
      <div ng-show="showme" class="boxme">
        <h2>Box to Show and Hide</h2>
        <p>Show and hide this box using animate.css the angularway!</p>
      </div>
    </div>

CSS

.boxme.ng-hide-add {
    -webkit-animation: fadeOutLeftBig 0.4s;
    display: block!important;
}
.boxme.ng-hide-remove {
    -webkit-animation: fadeInLeftBig 0.4s;
}

JavaScript

(function(){
  
  var app = angular.module("theapp", ['ngAnimate']);
  
  var controller = function($scope){
    $scope.showme = false;
  };
  
  app.controller("controller", controller);
}());