AngularJS - Example - AnchoringExample

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-anchoringExample-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="anchoringExample">
  <a href="#/">Home</a>
  <hr />
  <div class="view-container">
    <div ng-view class="view"></div>
  </div>
</body>
</html>

(function(){
'use strict';

angular
  .module('anchoringExample', ['ngAnimate', 'ngRoute'])
  .config(RouteProvider)
  .controller('HomeController', HomeController)
  .controller('ProfileController', ProfileController)
  .service('Records', RecordsService);
  
RouteProvider.$inject = ['$routeProvider'];
function RouteProvider($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'home.html',
    controller: 'HomeController as home'
  });
  $routeProvider.when('/profile/:id', {
    templateUrl: 'profile.html',
    controller: 'ProfileController as profile'
  });
}

HomeController.$inject = ['Records'];
function HomeController(Records){
  this.records = Records.get();
}

ProfileController.$inject = ['$routeParams', '$animate', 'Records'];
function ProfileController($routeParams, $animate, Records){
  var index = parseInt($routeParams.id, 10);
  var record = Records.get(index);

  this.title = record.title;
  this.id = record.id;  
}

function RecordsService(){
  var records = [
    { id:1, title: "Miss Beulah Roob" },
    { id:2, title: "Trent Morissette" },
    { id:3, title: "Miss Ava Pouros" },
    { id:4, title: "Rod Pouros" },
    { id:5, title: "Abdul Rice" },
    { id:6, title: "Laurie Rutherford Sr." },
    { id:7, title: "Nakia McLaughlin" },
    { id:8, title: "Jordon Blanda DVM" },
    { id:9, title: "Rhoda Hand" },
    { id:10, title: "Alexandrea Sauer" }
  ];
  
  return {
    get: function(index){
      if (angular.isUndefined(index))
        return records;
      else
        return records[index-1];
    }
  }
}

})();

<h2>Welcome to the home page</h1>
<p>Please click on an element</p>
<a class="record"
   ng-href="#/profile/{{record.id}}"
   ng-animate-ref="{{record.id}}"
   ng-repeat="record in home.records">
  {{record.title}}
</a>

<div class="profile record" ng-animate-ref="{{profile.id}}">
  {{profile.title}}
</div>

.record {
  display:block;
  font-size:20px;
}
.profile {
  background:black;
  color:white;
  font-size:100px;
}
.view-container {
  position:relative;
}

/* ngAnimation */
.view-container > .view.ng-animate {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  min-height:500px;
}

/* ng-enter -> ng-enter-active */
.view.ng-enter {
  transition:0.5s linear all;
  transform:translateX(100%);
}
.view.ng-enter.ng-enter-active {
  transform:translateX(0%);
}

/* ng-leave -> ng-leave-active */
.view.ng-leave {
  transition:0.5s linear all;
  transform:translateX(0%);
}
.view.ng-leave.ng-leave-active {
  transform:translateX(-100%);
}

/* ng-anchor -> ng-anchor-out OR ng-anchor-in */
.record.ng-anchor {
  transition:0.5s linear all;
}
.record.ng-anchor-out {
  background:red;
}
.record.ng-anchor-in {
  background:yellow;
}