Angular 1.4 Base Fiddle

http://angularjs.org/

by ashraffayad

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js"></script>
<div ng-controller="mainCtrl">
    <label>
        <input type="checkbox" ng-model="hide" />hide</label>
    <br />{{hide}}
    <br />
    <div class="fade-in square" ng-hide="hide">&nbsp;</div>
</div>

CSS

.square { background: darkgreen; height: 200px; width:300px;}
@keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1; }}
@-webkit-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1; }}
@keyframes fadeOut { 0% { opacity: 1;} 100% { opacity: 0; }}
@-webkit-keyframes fadeOut { 0% { opacity: 1;} 100% { opacity: 0; }}

.fade-in.ng-hide-remove { -webkit-animation:fadeIn 1s; animation:fadeIn 1s; }
.fade-in.ng-hide-add-active{ -webkit-animation:fadeOut 1s; animation:fadeOut 1s;display:block!important;}}
.fade-in.ng-hide-add {display:none!important}
.ng-hide { display:none!important;}

JavaScript

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


app.controller('mainCtrl', ['$scope', function (scope) {
    scope.anim = 'fade-in';
    scope.hide = false;
}]);