JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<div ng-app>
     <div ng-controller='ctrl'>
        <input type='button' value='click' ng-click='clicked()' />  
        <div ng-show="foo == true"  class='myDiv' ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
     
        </div>
        
    </div>
</div>

CSS

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
}
.fadeIn-setup,.fadeOut-setup {
  -webkit-transition: 1s linear opacity;
  -moz-transition: 1s linear opacity;
  -o-transition: 1s linear opacity;
  transition: 1s linear opacity;
}
.fadeIn-setup{
  opacity:0;
}
.fadeOut-setup{
  opacity:1;
}
.fadeIn-setup.fadeIn-start {
  opacity: 1;
}
.fadeOut-setup.fadeOut-start{
    opacity:0;
}

JavaScript

function ctrl($scope){
    $scope.foo = false;
    $scope.clicked = function(){
       $scope.foo = !($scope.foo);
    }
}