JSFiddle - React, Tailwind, and code Playground

by alanzam2223

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<div style="width:100%;height:100%;" ng-app="myApp" ng-controller="c">

<div class="box" ng-show="showBox">
</div>

<button ng-click="showBox = !showBox">s</button>


</div>

CSS

.box
{
width:50px;
height:50px;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:deepskyblue;
  
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.box.ng-hide-remove
{
  animation-name:fadeInUp;
  animation-duration:.5s;
}

JavaScript

var mod= angular.module('myApp',['ngAnimate']);

mod.controller('c',function($scope){});