More action sheet styles and animations

dist/css/ionic.css

@@ -2528,9 +2528,43 @@ a.subdued‎ {
     animation: fadeOutHalf 0.2s;
     -webkit-animation-fill-mode: forwards; }
 
+@-webkit-keyframes actionSheetUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0; }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes actionSheetOut {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1; }
+
+  100% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0; } }
+
+.action-sheet-up {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0%, 0); }
+  .action-sheet-up.ng-enter, .action-sheet-up .ng-enter {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    -webkit-animation-duration: 200ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+  .action-sheet-up.ng-enter-active, .action-sheet-up .ng-enter-active {
+    -webkit-animation-name: actionSheetUp; }
+  .action-sheet-up.ng-leave, .action-sheet-up .ng-leave {
+    -webkit-animation-duration: 200ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+  .action-sheet-up.ng-leave-active, .action-sheet-up .ng-leave {
+    -webkit-animation-name: actionSheetOut; }
+
 .action-sheet {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
   position: fixed;
   bottom: 0;
   left: 15px;
@@ -2539,9 +2573,9 @@ a.subdued‎ {
   width: calc(100% - 30px); }
   .action-sheet .button {
     display: block;
-    padding: 6px;
+    padding: 1px;
     width: 100%;
-    border-radius: none;
+    border-radius: 0;
     background-color: transparent;
     color: #4a87ee;
     font-size: 18px; }
@@ -2556,11 +2590,14 @@ a.subdued‎ {
 
 .action-sheet-group {
   background-color: #fff;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   border-radius: 3px 3px 3px 3px; }
   .action-sheet-group .button {
     border-radius: 0;
     border-width: 1px 0px 0px 0px; }
+    .action-sheet-group .button.active, .action-sheet-group .button:active {
+      background-color: transparent;
+      color: inherit; }
   .action-sheet-group .button:first-child:last-child {
     border-width: 0; }
 

dist/js/ionic-angular.js

@@ -31,8 +31,8 @@ angular.module('ionic', [
 ;
 angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
 
-.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', 'TemplateLoader',
-    function($rootScope, $document, $compile, $animate, TemplateLoader) {
+.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', 'TemplateLoader',
+    function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) {
 
   return {
     /**
@@ -61,8 +61,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
             opts.cancel();
           }
         });
-        $animate.removeClass(element, 'active', function() {
-          scope.$destroy();
+        
+        $timeout(function() {
+          $animate.removeClass(element, 'active', function() {
+            scope.$destroy();
+          });
         });
       };
 
@@ -431,7 +434,7 @@ angular.module('ionic.ui.actionSheet', [])
       });
     },
     template: '<div class="action-sheet-backdrop">' +
-                '<div class="action-sheet slide-in-up">' +
+                '<div class="action-sheet action-sheet-up">' +
                   '<div class="action-sheet-group">' +
                     '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
                     '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +

js/ext/angular/src/directive/ionicActionSheet.js

@@ -21,7 +21,7 @@ angular.module('ionic.ui.actionSheet', [])
       });
     },
     template: '<div class="action-sheet-backdrop">' +
-                '<div class="action-sheet slide-in-up">' +
+                '<div class="action-sheet action-sheet-up">' +
                   '<div class="action-sheet-group">' +
                     '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
                     '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +

js/ext/angular/src/service/ionicActionSheet.js

@@ -1,7 +1,7 @@
 angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
 
-.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', 'TemplateLoader',
-    function($rootScope, $document, $compile, $animate, TemplateLoader) {
+.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', 'TemplateLoader',
+    function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) {
 
   return {
     /**
@@ -30,8 +30,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
             opts.cancel();
           }
         });
-        $animate.removeClass(element, 'active', function() {
-          scope.$destroy();
+        
+        $timeout(function() {
+          $animate.removeClass(element, 'active', function() {
+            scope.$destroy();
+          });
         });
       };
 

js/ext/angular/test/actionSheet.html

@@ -15,7 +15,7 @@
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
-      angular.module('actionTest', ['ionic'])
+      angular.module('actionTest', ['ionic', 'ngAnimate'])
 
       .controller('ActionCtrl', function($scope, ActionSheet) {
         $scope.show = function() {

scss/_action-sheet.scss

@@ -44,8 +44,60 @@
   }
 }
 
+@-webkit-keyframes actionSheetUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes actionSheetOut {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+}
+$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
+
+.action-sheet-up {
+  opacity: 1;
+  // Start it down low
+  -webkit-transform: translate3d(0, 0%, 0);
+
+  &.ng-enter, .ng-enter {
+    // Start hidden
+    opacity: 0;
+    // Start it down low
+    -webkit-transform: translate3d(0, 100%, 0);
+
+    -webkit-animation-duration: 200ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: $slide-in-up-function;
+  }
+
+  &.ng-enter-active, .ng-enter-active {
+    -webkit-animation-name: actionSheetUp;
+  }
+
+  &.ng-leave, .ng-leave {
+    -webkit-animation-duration: 200ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: $slide-in-up-function;
+  }
+
+  &.ng-leave-active, .ng-leave {
+    -webkit-animation-name: actionSheetOut;
+  }
+}
+
 .action-sheet {
-  @include translate3d(0, 100%, 0);
 
   position: fixed;
   bottom: 0;
@@ -56,9 +108,9 @@
 
   .button {
     display: block;
-    padding: 6px;
+    padding: 1px;
     width: 100%;
-    border-radius: none;
+    border-radius: 0;
 
     background-color: transparent;
 
@@ -80,11 +132,16 @@
 
 .action-sheet-group {
   background-color: #fff;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   border-radius: $sheet-border-radius;
   .button {
     border-radius: 0;
     border-width: 1px 0px 0px 0px;
+
+    &.active, &:active {
+      background-color: transparent;
+      color: inherit;
+    }
   }
   .button:first-child:last-child {
     border-width: 0;