AngularJS.de - Animations with ng-show/hide

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

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<button ng-click="toggle = !toggle">Toggle!</button>

<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>
<div class="box off" ng-hide="toggle" ng-animate="'box'">Off</div>

CSS

.box { color: white; text-align: center; height: 100px; font-size: 86px; }
.on  { background-color: green; }
.off { background-color: red; }


.box-show-setup, .box-hide-setup {
  -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-show-setup { opacity:0; height: 0; }
.box-show-setup.box-show-start { opacity:1; height: 100px; }

.box-hide-setup { opacity:1; height: 0; }
.box-hide-setup.box-hide-start { opacity:0; height: 100px; }

JavaScript

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