AngularJS.de - Animations with ng-show/hide

Example for AngularJS with ng-show/hide and ng-animate.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<button ng-click="toggle = !toggle">Toggle!</button>

<div class="box" ng-show="toggle">foo</div>

CSS

.box {
  color: white;
  text-align: center;
  height: 100px;
  font-size: 86px;   
  background-color: green;
  -webkit-transition:all linear 0.3s;
  -moz-transition:all linear 0.3s;
  -ms-transition:all linear 0.3s;
  -o-transition:all linear 0.3s;
  transition:all linear 0.3s;
}

.box.ng-hide { opacity:0; height: 0; }
.box.ng-hide-active { opacity:1; height: 100px; }

JavaScript

angular.module('toto', ['ngAnimate'])

.controller('MainController', function ($scope) {
  $scope.toggle = true;
});