Angular: Fade Out and Hide

http://angularjs.org/

by emilcieslar

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="myCtrl">
  <button ng-click="hideStuff()">Click me!</button>
  <div class="default" ng-hide="hidden" ng-class="{fade: startFade}">This will get hidden!</div>
</div>

CSS

.default {
  opacity: 1;
}

.fade {
  -webkit-transition: opacity 2s;
  /* For Safari 3.1 to 6.0 */
  transition: opacity 2s;
  opacity: 0;
}

JavaScript

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

myApp.controller("myCtrl", function($scope, $timeout) {
  $scope.hideStuff = function() {
    $scope.startFade = true;
    $timeout(function() {
      $scope.hidden = true;
    }, 2000);

  };
});