From 38112b66ca1dd29e62b0d052d0bbc86a736be7a7 Mon Sep 17 00:00:00 2001 From: Israel Guzman Date: Sat, 30 Aug 2014 02:22:46 -0500 Subject: [PATCH] =?UTF-8?q?Agrega=20paso=2012=20de=20la=20aplicaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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. --- .../angular-route/angular-route.js | 2 +- app/bower_components/angular/angular.js | 12 +-- app/css/animaciones.css | 97 +++++++++++++++++++ app/css/app.css | 17 +++- app/index.html | 9 +- app/js/animaciones.js | 52 ++++++++++ app/js/ap.js | 3 +- app/partials/detalle-telefono.html | 8 +- app/partials/lista-telefonos.html | 3 +- 9 files changed, 190 insertions(+), 13 deletions(-) create mode 100644 app/css/animaciones.css create mode 100644 app/js/animaciones.js diff --git a/app/bower_components/angular-route/angular-route.js b/app/bower_components/angular-route/angular-route.js index 7b97555..5fb279b 100644 --- a/app/bower_components/angular-route/angular-route.js +++ b/app/bower_components/angular-route/angular-route.js @@ -713,7 +713,7 @@ ngRouteModule.directive('ngView', ngViewFillContentFactory); - + .view-animate-container { position:relative; height:100px!important; diff --git a/app/bower_components/angular/angular.js b/app/bower_components/angular/angular.js index 4be933a..4fcba30 100644 --- a/app/bower_components/angular/angular.js +++ b/app/bower_components/angular/angular.js @@ -19549,7 +19549,7 @@ forEach( I'm removed when the checkbox is unchecked. - + .animate-if { background:white; border:1px solid black; @@ -19691,7 +19691,7 @@ var ngIfDirective = ['$animate', function($animate) { Content of template2.html - + .slide-animate-container { position:relative; background:white; @@ -20334,7 +20334,7 @@ var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interp - + .example-animate-container { background:white; border:1px solid black; @@ -20700,7 +20700,7 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) { @import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css); - + .animate-show { -webkit-transition:all linear 0.5s; transition:all linear 0.5s; @@ -20856,7 +20856,7 @@ var ngShowDirective = ['$animate', function($animate) { @import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.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]; }]); - + .animate-switch-container { position:relative; background:white; diff --git a/app/css/animaciones.css b/app/css/animaciones.css new file mode 100644 index 0000000..46f3da6 --- /dev/null +++ b/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; } +} + diff --git a/app/css/app.css b/app/css/app.css index 7026c60..cf22c2a 100644 --- a/app/css/app.css +++ b/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; diff --git a/app/index.html b/app/index.html index 9e2eae3..ee5d3b7 100644 --- a/app/index.html +++ b/app/index.html @@ -5,17 +5,24 @@ Galeria de Telefonos Google + + + + + -
+
+
+
diff --git a/app/js/animaciones.js b/app/js/animaciones.js new file mode 100644 index 0000000..a6d5958 --- /dev/null +++ b/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 + }; +}); diff --git a/app/js/ap.js b/app/js/ap.js index aa5ca15..96adbbf 100644 --- a/app/js/ap.js +++ b/app/js/ap.js @@ -6,7 +6,8 @@ var phonecatAp = angular.module('phonecatAp', [ 'ngRoute', 'phonecatControladores', 'phonecatFiltros', - 'phonecatServicios' + 'phonecatServicios', + 'phonecatAnimaciones' ]); phonecatAp.config(['$routeProvider', diff --git a/app/partials/detalle-telefono.html b/app/partials/detalle-telefono.html index ed01258..a6955df 100644 --- a/app/partials/detalle-telefono.html +++ b/app/partials/detalle-telefono.html @@ -1,4 +1,9 @@ - +
+ +

{{telefono.name}}

@@ -10,7 +15,6 @@

{{telefono.name}}

-
  • Availability and Networks diff --git a/app/partials/lista-telefonos.html b/app/partials/lista-telefonos.html index 49464ba..61dc7ca 100644 --- a/app/partials/lista-telefonos.html +++ b/app/partials/lista-telefonos.html @@ -14,7 +14,8 @@