Agrega paso 12 de la aplicación

- Agrega animaciones a la aplicación:

  - Anima cambios a la lista de teléfonos, agregando, removiendo y
reordenando teléfonos.

  - Anima cambios a la imagen principal en la vista del detalle de
teléfono.

app/bower_components/angular-route/angular-route.js

@@ -713,7 +713,7 @@ ngRouteModule.directive('ngView', ngViewFillContentFactory);
         </div>
       </file>
 
-      <file name="animations.css">
+      <file name="animaciones.css">
         .view-animate-container {
           position:relative;
           height:100px!important;

app/bower_components/angular/angular.js

@@ -19549,7 +19549,7 @@ forEach(
         I'm removed when the checkbox is unchecked.
       </span>
     </file>
-    <file name="animations.css">
+    <file name="animaciones.css">
       .animate-if {
         background:white;
         border:1px solid black;
@@ -19691,7 +19691,7 @@ var ngIfDirective = ['$animate', function($animate) {
     <file name="template2.html">
       Content of template2.html
     </file>
-    <file name="animations.css">
+    <file name="animaciones.css">
       .slide-animate-container {
         position:relative;
         background:white;
@@ -20334,7 +20334,7 @@ var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interp
         </ul>
       </div>
     </file>
-    <file name="animations.css">
+    <file name="animaciones.css">
       .example-animate-container {
         background:white;
         border:1px solid black;
@@ -20700,7 +20700,7 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
     <file name="glyphicons.css">
       @import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css);
     </file>
-    <file name="animations.css">
+    <file name="animaciones.css">
       .animate-show {
         -webkit-transition:all linear 0.5s;
         transition:all linear 0.5s;
@@ -20856,7 +20856,7 @@ var ngShowDirective = ['$animate', function($animate) {
     <file name="glyphicons.css">
       @import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css);
     </file>
-    <file name="animations.css">
+    <file name="animaciones.css">
       .animate-hide {
         -webkit-transition:all linear 0.5s;
         transition:all linear 0.5s;
@@ -21035,7 +21035,7 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) {
           $scope.selection = $scope.items[0];
         }]);
     </file>
-    <file name="animations.css">
+    <file name="animaciones.css">
       .animate-switch-container {
         position:relative;
         background:white;

app/css/animaciones.css

@@ -0,0 +1,97 @@
+/*
+ * animations css stylesheet
+ */
+
+/* animate ngRepeat in phone listing */
+
+.phone-listing.ng-enter,
+.phone-listing.ng-leave,
+.phone-listing.ng-move {
+  -webkit-transition: 0.5s linear all;
+  -moz-transition: 0.5s linear all;
+  -o-transition: 0.5s linear all;
+  transition: 0.5s linear all;
+}
+
+.phone-listing.ng-enter,
+.phone-listing.ng-move {
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.phone-listing.ng-move.ng-move-active,
+.phone-listing.ng-enter.ng-enter-active {
+  opacity: 1;
+  height: 120px;
+}
+
+.phone-listing.ng-leave {
+  opacity: 1;
+  overflow: hidden;
+}
+
+.phone-listing.ng-leave.ng-leave-active {
+  opacity: 0;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* cross fading between routes with ngView */
+
+.view-container {
+  position: relative;
+}
+
+.view-frame.ng-enter,
+.view-frame.ng-leave {
+  background: white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.view-frame.ng-enter {
+  -webkit-animation: 0.5s fade-in;
+  -moz-animation: 0.5s fade-in;
+  -o-animation: 0.5s fade-in;
+  animation: 0.5s fade-in;
+  z-index: 100;
+}
+
+.view-frame.ng-leave {
+  -webkit-animation: 0.5s fade-out;
+  -moz-animation: 0.5s fade-out;
+  -o-animation: 0.5s fade-out;
+  animation: 0.5s fade-out;
+  z-index: 99;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-moz-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@-moz-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@-webkit-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+

app/css/app.css

@@ -4,6 +4,16 @@ body {
     padding-top: 20px;
 }
 
+
+.phone-images {
+    background-color: white;
+    width: 450px;
+    height: 450px;
+    overflow: hidden;
+    position: relative;
+    float: left;
+}
+
 .phones {
     list-style: none;
 }
@@ -25,15 +35,20 @@ body {
 /** Detail View **/
 img.phone {
     float: left;
-    border: 1px solid black;
     margin-right: 3em;
     margin-bottom: 2em;
     background-color: white;
     padding: 2em;
     height: 400px;
     width: 400px;
+    display: none;
+}
+
+img.phone:first-child {
+    display: block;
 }
 
+
 ul.phone-thumbs {
     margin: 0;
     list-style: none;

app/index.html

@@ -5,17 +5,24 @@
   <title>Galeria de Telefonos Google</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
   <link rel="stylesheet" href="css/app.css">
+  <link rel="stylesheet" href="css/animaciones.css">
+
+  <script src="bower_components/jquery/jquery.js"></script>
   <script src="bower_components/angular/angular.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
+  <script src="bower_components/angular-animate/angular-animate.js"></script>
   <script src="js/ap.js"></script>
   <script src="js/controladores.js"></script>
   <script src="js/filtros.js"></script>
   <script src="js/servicios.js"></script>
+  <script src="js/animaciones.js"></script>
 </head>
 <body>
 
-<div ng-view></div>
+<div class="view-container">
+  <div ng-view class="view-frame"></div>
+</div>
 
 </body>
 </html>

app/js/animaciones.js

@@ -0,0 +1,52 @@
+var phonecatAnimaciones = angular.module('phonecatAnimaciones', ['ngAnimate']);
+
+phonecatAnimaciones.animation('.phone', function() {
+
+  var animateUp = function(element, className, done) {
+    if(className != 'active') {
+      return;
+    }
+    element.css({
+      position: 'absolute',
+      top: 500,
+      left: 0,
+      display: 'block'
+    });
+
+    jQuery(element).animate({
+      top: 0
+    }, done);
+
+    return function(cancel) {
+      if(cancel) {
+        element.stop();
+      }
+    };
+  }
+
+  var animateDown = function(element, className, done) {
+    if(className != 'active') {
+      return;
+    }
+    element.css({
+      position: 'absolute',
+      left: 0,
+      top: 0
+    });
+
+    jQuery(element).animate({
+      top: -500
+    }, done);
+
+    return function(cancel) {
+      if(cancel) {
+        element.stop();
+      }
+    };
+  }
+
+  return {
+    addClass: animateUp,
+    removeClass: animateDown
+  };
+});

app/js/ap.js

@@ -6,7 +6,8 @@ var phonecatAp = angular.module('phonecatAp', [
   'ngRoute',
   'phonecatControladores',
   'phonecatFiltros',
-  'phonecatServicios'
+  'phonecatServicios',
+  'phonecatAnimaciones'
 ]);
 
 phonecatAp.config(['$routeProvider',

app/partials/detalle-telefono.html

@@ -1,4 +1,9 @@
-<img ng-src="{{urlImagenPrincipal}}" class="phone">
+<div class="phone-images">
+  <img ng-src="{{img}}"
+       class="phone"
+       ng-repeat="img in telefono.images"
+       ng-class="{active: urlImagenPrincipal==img}">
+</div>
 
 <h1>{{telefono.name}}</h1>
 
@@ -10,7 +15,6 @@ <h1>{{telefono.name}}</h1>
   </li>
 </ul>
 
-
 <ul class="specs">
   <li>
     <span>Availability and Networks</span>

app/partials/lista-telefonos.html

@@ -14,7 +14,8 @@
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="telefono in telefonos | filter:query | orderBy:ordenProp" class="thumbnail">
+        <li ng-repeat="telefono in telefonos | filter:query | orderBy:ordenProp"
+            class="thumbnail phone-listing">
           <a href="#/telefonos/{{telefono.id}}" class="thumb"><img ng-src="{{telefono.imageUrl}}"></a>
           <a href="#/telefonos/{{telefono.id}}">{{telefono.name}}</a>
           <p>{{telefono.snippet}}</p>