JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
<body ng-app="myApp1">
<div id='outerdiv' ng-controller="MyCtrl" >
    <div ng-click="myValue=true" >LEFT</div>
    <div  ng-click="myValue=false">RIGHT</div>
        <div id="one" class='animate-hide'  ng-hide="myValue"> 
            this is just a sample div
        </div>
    {{myValue}}
</div>
</body>

CSS

.animate-hide {
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-hide.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

JavaScript

var app = angular.module("myApp1", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
});