' +
'
{{titleText}}
' +
diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js
index fdbaf31df0c..227fec96426 100644
--- 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
index 723492064a7..a2c8319c324 100644
--- 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
index 2a330eff41e..37d47f2d63f 100644
--- 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
index dba15bc65e2..9faea62f5ae 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -5,7 +5,9 @@
* 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);
/**
@@ -13,48 +15,40 @@
* --------------------------------------------------
*/
-$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
// -------------------------------