fix(actionsheet): Fix slide-up animation, closes #713

ionic-team · Mar 5, 2014 · 44b31e1 · 44b31e1
1 parent 5ebba71
commit 44b31e1
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 120 deletions.
diff --git a/js/ext/angular/src/directive/ionicActionSheet.js b/js/ext/angular/src/directive/ionicActionSheet.js
@@ -31,7 +31,7 @@ angular.module('ionic.ui.actionSheet', [])
       $element.bind('click', backdropClick);
     },
     template: '<div class="action-sheet-backdrop">' +
-                '<div class="action-sheet-wrapper action-sheet-up">' + 
+                '<div class="action-sheet-wrapper">' +
                   '<div class="action-sheet">' +
                     '<div class="action-sheet-group">' +
                       '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +

diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js
@@ -1,14 +1,13 @@
 angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.service.platform', 'ionic.ui.actionSheet', 'ngAnimate'])
 
-.factory('$ionicActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout',
-    '$ionicTemplateLoader', '$ionicPlatform',
-    function($rootScope, $document, $compile, $animate, $timeout, $ionicTemplateLoader, $ionicPlatform) {
+.factory('$ionicActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', '$ionicTemplateLoader', '$ionicPlatform',
+                      function($rootScope, $document, $compile, $animate, $timeout, $ionicTemplateLoader, $ionicPlatform) {
 
   return {
     /**
      * Load an action sheet with the given template string.
      *
-     * A new isolated scope will be created for the 
+     * A new isolated scope will be created for the
      * action sheet and the new element will be appended into the body.
      *
      * @param {object} opts the options for this ActionSheet (see docs)
@@ -25,12 +24,13 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
       var sheetEl = angular.element(element[0].querySelector('.action-sheet-wrapper'));
 
       var hideSheet = function(didCancel) {
-        $animate.leave(sheetEl, function() {
-          if(didCancel) {
+        sheetEl.removeClass('action-sheet-up');
+        if(didCancel) {
+          $timeout(function(){
             opts.cancel();
-          }
-        });
-        
+          }, 200);
+        }
+
         $animate.removeClass(element, 'active', function() {
           scope.$destroy();
         });
@@ -77,8 +77,10 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
       scope.sheet = sheet;
 
       $animate.addClass(element, 'active');
-      $animate.enter(sheetEl, element, null, function() {
-      });
+
+      $timeout(function(){
+        sheetEl.addClass('action-sheet-up');
+      }, 20);
 
       return sheet;
     }

diff --git a/js/ext/angular/test/service/ionicActionSheet.unit.js b/js/ext/angular/test/service/ionicActionSheet.unit.js
@@ -13,6 +13,16 @@ describe('Ionic ActionSheet Service', function() {
     expect(s.el.classList.contains('active')).toBe(true);
   });
 
+  it('Should add .action-sheet-up to .action-sheet-wrapper', function() {
+    var s = sheet.show();
+    var el = angular.element(s.el);
+    var wrapper = angular.element(s.el.querySelector('.action-sheet-wrapper'));
+    expect(wrapper.length).toEqual(1);
+    expect(wrapper.hasClass('action-sheet-up')).toEqual(false);
+    timeout.flush();
+    expect(wrapper.hasClass('action-sheet-up')).toEqual(true);
+  });
+
   it('Should handle hardware back button', function() {
     // Fake cordova
     window.device = {};
@@ -30,7 +40,7 @@ describe('Ionic ActionSheet Service', function() {
     var s = sheet.show();
 
     expect(angular.element(document.body).hasClass('action-sheet-open')).toBe(true);
-    
+
     ionic.trigger('backbutton', {
       target: document
     });

diff --git a/scss/_action-sheet.scss b/scss/_action-sheet.scss
@@ -3,23 +3,6 @@
  * --------------------------------------------------
  */
 
-@-webkit-keyframes fadeInHalf {
-  from { background-color: rgba(0,0,0,0); }
-  to { background-color: rgba(0,0,0,0.5); }
-}
-@keyframes fadeInHalf {
-  from { background-color: rgba(0,0,0,0); }
-  to { background-color: rgba(0,0,0,0.5); }
-}
-@-webkit-keyframes fadeOutHalf {
-  from { background-color: rgba(0,0,0,0.5); }
-  to { background-color: rgba(0,0,0,0); }
-}
-@keyframes fadeOutHalf {
-  from { background-color: rgba(0,0,0,0.5); }
-  to { background-color: rgba(0,0,0,0); }
-}
-
 .action-sheet-backdrop {
   position: fixed;
   top: 0;
@@ -41,62 +24,21 @@
   }
 }
 
-@-webkit-keyframes actionSheetUp {
-  0% {
-    @include translate3d(0, 100%, 0);
-    opacity: 0;
-  }
-  100% {
-    @include translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-@-webkit-keyframes actionSheetOut {
-  0% {
-    @include translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    @include translate3d(0, 100%, 0);
-    opacity: 0;
-  }
+.action-sheet-wrapper {
+  @include translate3d(0, 100%, 0);
+  @include transition(all ease-in-out 300ms);
+  position: absolute;
+  bottom: 0;
+  width: 100%;
 }
-$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
 
 .action-sheet-up {
-  // Start it down low
-  @include translate3d(0, 0%, 0);
-  opacity: 1;
-
-  &.ng-enter, .ng-enter {
-    // Start it down low
-    @include translate3d(0, 100%, 0);
-
-    @include animation-duration(400ms);
-    @include animation-fill-mode(both);
-    @include animation-timing-function($slide-in-up-function);
-    // Start hidden
-    opacity: 0;
-  }
-
-  &.ng-enter-active, .ng-enter-active {
-    @include animation-name(actionSheetUp);
-  }
-
-  &.ng-leave, .ng-leave {
-    @include animation-duration(400ms);
-    @include animation-fill-mode(both);
-    @include animation-timing-function($slide-in-up-function);
-  }
-
-  &.ng-leave-active, .ng-leave {
-    @include animation-name(actionSheetOut);
-  }
+  @include translate3d(0, 0, 0);
 }
 
 .action-sheet {
-  margin-left: 15px; 
-  margin-right: 15px; 
+  margin-left: 15px;
+  margin-right: 15px;
   width: auto;
   z-index: $z-index-action-sheet;
   overflow: hidden;
@@ -118,12 +60,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
   }
 }
 
-.action-sheet-wrapper {
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-}
-
 .action-sheet-title {
   padding: 10px;
   color: lighten($base-color, 40%);

diff --git a/scss/_animations.scss b/scss/_animations.scss
@@ -5,56 +5,50 @@
  * and pretty easy on performance. They can be overidden
  * and enhanced easily.
  */
- $transition-duration: 250ms;
+
+$transition-duration: 250ms;
+$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
 
 
 /**
  * Keyframes
  * --------------------------------------------------
  */
 
-$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
+// Slide In From The Bottom To The Top
+// -------------------------------
+
 @-webkit-keyframes slideInUp {
-  0% {
-    @include translate3d(0, 100%, 0);
-    opacity: 1;
-  }
-  100% {
-    @include translate3d(0, 0, 0);
-    opacity: 1;
-  }
+  0%   { -webkit-transform: translate3d(0, 100%, 0); }
+  100% { -webkit-transform: translate3d(0, 0, 0); }
 }
 @-moz-keyframes slideInUp {
-  0% {
-    @include translate3d(0, 100%, 0);
-    opacity: 1;
-  }
-  100% {
-    @include translate3d(0, 0, 0);
-    opacity: 1;
-  }
+  0%   { -moz-transform: translate3d(0, 100%, 0); }
+  100% { -moz-transform: translate3d(0, 0, 0); }
 }
+@keyframes slideInUp {
+  0%   { transform: translate3d(0, 100%, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}
+
+
+// Slide Out From The Top To Bottom
+// -------------------------------
+
 @-webkit-keyframes slideOutUp {
-  0% {
-    @include translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    @include translate3d(0, 100%, 0);
-    opacity: 1;
-  }
+  0%   { -webkit-transform: translate3d(0, 0, 0); }
+  100% { -webkit-transform: translate3d(0, 100%, 0); }
 }
 @-moz-keyframes slideOutUp {
-  0% {
-    @include translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    @include translate3d(0, 100%, 0);
-    opacity: 1;
-  }
+  0%   { -moz-transform: translate3d(0, 0, 0); }
+  100% { -moz-transform: translate3d(0, 100%, 0); }
+}
+@keyframes slideOutUp {
+  0%   { transform: translate3d(0, 0, 0); }
+  100% { transform: translate3d(0, 100%, 0); }
 }
 
+
 // Slide In From Left
 // -------------------------------
 
@@ -157,6 +151,40 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
 }
 
 
+// Fade Half In
+// -------------------------------
+
+@-webkit-keyframes fadeInHalf {
+  from { background-color: rgba(0,0,0,0); }
+  to { background-color: rgba(0,0,0,0.5); }
+}
+@-moz-keyframes fadeInHalf {
+  from { background-color: rgba(0,0,0,0); }
+  to { background-color: rgba(0,0,0,0.5); }
+}
+@keyframes fadeInHalf {
+  from { background-color: rgba(0,0,0,0); }
+  to { background-color: rgba(0,0,0,0.5); }
+}
+
+
+// Fade Half Out
+// -------------------------------
+
+@-webkit-keyframes fadeOutHalf {
+  from { background-color: rgba(0,0,0,0.5); }
+  to { background-color: rgba(0,0,0,0); }
+}
+@-moz-keyframes fadeOutHalf {
+  from { background-color: rgba(0,0,0,0.5); }
+  to { background-color: rgba(0,0,0,0); }
+}
+@keyframes fadeOutHalf {
+  from { background-color: rgba(0,0,0,0.5); }
+  to { background-color: rgba(0,0,0,0); }
+}
+
+
 // Spin
 // -------------------------------