ng-animate-ref with hardcoded data

<!DOCTYPE html>
<html ng-app="music">

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-controller="HomeCtrl">
    <ui-view class="view-animation"></ui-view>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
  	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-resource.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
  	<script src="app.js"></script>
  </body>

</html>

var app = angular.module('music', ['ui.router', 'ngResource', 'ngAnimate']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state({
      name: 'albums',
      url: '/',
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl'
    })
    .state({
      name: 'album',
      url: '/photos/:id',
      templateUrl: 'views/album.html',
      controller: 'AlbumCtrl'
    })
  ;
  
  $urlRouterProvider.otherwise('/');
}]);

app.controller('HomeCtrl', ['$scope', 'PhotoFactory', function($scope, PhotoFactory) {
  var photos = PhotoFactory;
  $scope.photos = photos;
}]);

app.controller('AlbumCtrl', ['$scope', 'PhotoFactory', '$stateParams', function($scope, PhotoFactory, $stateParams) {
  var photos = PhotoFactory;
  $scope.photo = photos[$stateParams.id - 1];
}]);

app.factory('PhotoFactory', ['$resource', function($resource) {
  return [
    {
      id: 1,
      title: "accusamus beatae ad facilis cum similique qui sunt",
      url: "http://placehold.it/600/92c952",
      thumbnailUrl: "http://placehold.it/150/30ac17"
    },
    {
      id: 2,
      title: "reprehenderit est deserunt velit ipsam",
      url: "http://placehold.it/600/771796",
      thumbnailUrl: "http://placehold.it/150/dff9f6"
    },
    {
      id: 3,
      title: "officia porro iure quia iusto qui ipsa ut modi",
      url: "http://placehold.it/600/24f355",
      thumbnailUrl: "http://placehold.it/150/1941e9"
    },
    {
      id: 4,
      title: "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
      url: "http://placehold.it/600/d32776",
      thumbnailUrl: "http://placehold.it/150/39e985"
    },
    {
      id: 5,
      title: "natus nisi omnis corporis facere molestiae rerum in",
      url: "http://placehold.it/600/f66b97",
      thumbnailUrl: "http://placehold.it/150/7735a"
    }
  ];
}]);

ul li {
  list-style-type: none;
}

.view-animation.ng-enter, .view-animation.ng-leave {
  transition: .7s cubic-bezier(.39, 0, .3, 1) all;
  position: fixed;
  width: 100%;
}
.view-animation.ng-enter {
  transform: translate3d(0, 20%, 0);
  opacity: 0;
}
.view-animation.ng-leave,
.view-animation.ng-enter.ng-enter-active {
  transform: translate3d(0, 0%, 0);
  opacity: 1;
}
.view-animation.ng-leave.ng-leave-active {
  transform: translate3d(0, -20%, 0);
  opacity: 0;
}

.photo {
  width: 200px;
  height: 200px;
  margin: 2px;
  float: left;
  cursor: pointer;
}
.photo.ng-anchor {
  transition: .7s cubic-bezier(.39, 0, .3, 1) all;
}

<ul>
  <li ng-repeat="photo in photos">
    <img ng-src="{{photo.url}}" class="photo" ui-sref="album({id: photo.id})" ng-animate-ref="{{photo.id}}">
  </li>
</ul>

<img ng-src="{{photo.url}}" class="photo" ng-animate-ref="{{photo.id}}" ui-sref="albums">
<h3>{{photo.title}}</h3>