mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(actionsheet): Fix slide-up animation, closes #713
This commit is contained in:
Adam Bradley
@@ -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>' +
|
||||
|
||||
24
js/ext/angular/src/service/ionicActionSheet.js
vendored
24
js/ext/angular/src/service/ionicActionSheet.js
vendored
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
.action-sheet-wrapper {
|
||||
@include translate3d(0, 100%, 0);
|
||||
@include transition(all ease-in-out 300ms);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@-webkit-keyframes actionSheetOut {
|
||||
0% {
|
||||
@include translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
@include translate3d(0, 100%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
$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%);
|
||||
|
||||
@@ -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,47 +15,39 @@
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
|
||||
$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
|
||||
// -------------------------------
|
||||
|
||||
|
||||
Reference in New Issue
Block a user