AngularJS 1.2.0 Animations

angular.module('myApp', ['ngAnimate', 'ngRoute']);

angular.module('myApp')

  .config(function ($routeProvider) {

    $routeProvider
      .when('/template-1', {
        templateUrl: 'template-1.html'
      })
      .when('/template-2', {
        templateUrl: 'template-2.html'
      })
      .otherwise({
        redirectTo: '/template-1'
      });

  })

  .controller('MainCtrl', function($scope) {
    $scope.template = 'template-1.html';
    $scope.switchTemplate  = function(i) { $scope.template = 'template-' + i + '.html'; }
    $scope.items = [{name:'foo'}, {name:'bar'}, {name:'baz'}];
    $scope.addItem  = function() { $scope.items.push({name:'qux'}); }
    $scope.removeItem  = function() { $scope.items.pop(); }
  });


// Panels
//

/*.panel {
  position: absolute;
  top: 0px;
  left: 0px;
}*/

// Animations
//

.animation-fade {
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
  &.ng-enter {
    opacity: 0;
    &.ng-enter-active {
      opacity: 1;
    }
  }
  &.ng-leave {
    opacity: 1;
    &.ng-leave-active {
      opacity: 0;
    }
  }
}

.animation-slide {
  // -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  &.ng-enter {
    z-index: 100000;
    -webkit-transform: translate3d(100%, 0, 0);
    &.ng-enter-active {
      -webkit-transform: translate3d(0, 0, 0);
    }
  }
  &.ng-leave {
    z-index: -100000;
    -webkit-transform: translate3d(0, 0, 0);
    &.ng-leave-active {
      -webkit-transform: translate3d(-100%, 0, 0);
    }
  }
}

.animation-slide-contents {
  & > * {
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
  }
  &.ng-enter {
    & > * {
      z-index: 100000;
      -webkit-transform: translate3d(100%, 0, 0);
    }
    &.ng-enter-active {
      & > * {
        -webkit-transform: translate3d(0, 0, 0);
      }
    }
  }
  &.ng-leave {
    & > * {
      z-index: -100000;
      -webkit-transform: translate3d(0, 0, 0);
    }
    &.ng-leave-active {
      & > * {
        -webkit-transform: translate3d(-100%, 0, 0);
      }
    }
  }
}

<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Template n°1</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">Template n°2</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<!doctype html>
<html ng-app="myApp">

<head>
<!-- Styles -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="animations.less" />
<!-- Scripts -->
<script type="text/javascript" src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script type="text/javascript" src="//code.angularjs.org/snapshot/angular-animate.min.js"></script>
<script type="text/javascript" src="//code.angularjs.org/snapshot/angular-route.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body ng-controller="MainCtrl">

  <div class="container" style="max-width: 100%; padding:20px 20px 120px">
  
    <h2>ngView</h2>
    <hr />
    <a class="btn btn-success" href="#/template-1">template-1</a>
    <a class="btn btn-danger" href="#/template-2">template-2</a>
    <hr />
    <ul class="alert alert-danger">
      <li>enter animation bumps back before the end, more visible on large screen</li>
    </ul>
    <div>
      <div class="animation-slide" ng-view></div>
    </div>
  
    <h2>ngInclude</h2>
    <hr />
    <button type="button" class="btn btn-success" ng-click="switchTemplate(1)">template-1</button>
    <button type="button" class="btn btn-danger" ng-click="switchTemplate(2)">template-2</button>
    <hr />
  
    <div class="position-relative">
      <div ng-include="template" class="animation-slide"></div>
    </div>
    
    <h2>ngRepeat</h2>
    <hr />
    <button type="button" class="btn btn-success" ng-click="addItem()">add</button>
    <button type="button" class="btn btn-danger" ng-click="removeItem()">remove</button>
    <hr />
    
    <h3>Using <code>class</code></h3>
    <ul>
      <li ng-repeat="item in items" class="animation-fade">
        {{item.name}}
      </li>
    </ul>

    <h3>Using <code>ngClass</code></h3>
    <ul class="alert alert-danger ng-hide">
      <li>Using ngClass breaks animation enter state</li>
    </ul>
    <ul>
      <li ng-repeat="item in items" ng-class="'animation-fade'">
        {{item.name}}
      </li>
    </ul>    

  </div>

</body>
</html>