JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.8/angular-animate.min.js"></script>
<div ng-app="myApp">
     <div ng-controller='ctrl'>
        <div ng-click='clicked()'>[Double Click Me Fast] ng-show:{{foo}}</div>  
        <div ng-show="foo"  class='myDiv'>
        </div>
    </div>
</div>

CSS

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
   -webkit-transition: opacity 1s linear;
   -moz-transition: opacity  1s linear;
   -o-transition: opacity 1s linear;
   transition: opacity 1s linear;
   opacity: 1;
}

.myDiv.ng-hide-add, .myDiv.ng-hide-remove{
  display:block!important;
}
.myDiv.ng-hide{
  opacity: 0;
}

JavaScript

angular.module('myApp',['ngAnimate'])
  .controller('ctrl', function ($scope){
    $scope.foo = true;
    $scope.clicked = function(){
       $scope.foo = !($scope.foo);
    }
  });