JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>
<div ng-controller="flyoutCtrl" ng-app="flyoutApp">
  <button ng-click="showFlyoutPanel = true">{{btnText}}</button>
  
  <div class="showFlyoutPanel" ng-if="showFlyoutPanel">
     <div class="showFlyoutPanelContent">
    {{btnText}}
    <span class="close" ng-click="newFn()">&times;</span>
    </div>
  </div>
</div>

CSS

.showFlyoutPanel{

  position: fixed;
  width:100%;
  height: 100%;
  z-index:1000;
  top:0;
  left:0;
}
.showFlyoutPanelContent{
float: right;
background-color:orange;
width:80%;
height:100%;
}


.close{
  font-size: 25px;
  cursor:pointer;
  float:right;

}

.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {

}

.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
  -webkit-animation-timing-function: ease-in-out;  
  -webkit-animation: slideOut 5s; /* Chrome, Safari, Opera */
    animation: slideOut 5s ;
}

.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
    -webkit-animation: slideIn 5s; /* Chrome, Safari, Opera */
    animation: slideIn 5s ;
  -webkit-animation-timing-function: ease-in-out;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slideIn {
    from {left: 100%;}
    to {left: 0px;}
}

/* Standard syntax */
@keyframes slideIn {
    from {left: 100%;}
    to {left: 0px;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slideOut {
    from {left: 0px;}
    to {left: 100%;}
}

/* Standard syntax */
@keyframes slideOut {
   from {left: 0px;}
    to {left: 100%;}
}


/* Chrome, Safari, Opera */
@-webkit-keyframes slideIn {
    0%   {right:-100px;}
  25%  {right:-75px;}
  50%  {right:-50px;}
  75%  {right:-25px;}
    100% {right:0;opacity: 1;}
}

/* Standard syntax */
@keyframes slideIn {
     0%   {right:-100px;}
  25%  {right:-75px;}
  50%  {right:-50px;}
  75%  {right:-25px;}
    100% {right:0;opacity: 1;}
}


/* Chrome, Safari, Opera */
@-webkit-keyframes slideOut {
    0%   {right:0px;}
    25%  {right:25%;}
    50%  {right:50%;}
    75%  {right:75%;}
    100% {right:100%;}
}

/* Standard syntax */
@keyframes slideOut {
    0%   {right:0px;}
    25%  {right:25%;}
    50%  {right:50%;}
    75%  {right:75%;}
    100% {right:100%;}
}

JavaScript

var myApp = angular.module('flyoutApp',['ngAnimate']);
    myApp.controller('flyoutCtrl',function($scope){
      $scope.showFlyoutPanelContent = false;
      $scope.btnText = "Open Flyout Panel";
      
      $scope.newFn = function(){
         $scope.showFlyoutPanel = false;
      }
      
    })