Skip to content

Commit 6a43e3b

Browse files
mlynchmlynch
committed
Merge pull request #2069 from driftyco/wip-transition-cleanup
feat(transitions): Improved iOS and Android transitions
2 parents e00e938 + 527fc40 commit 6a43e3b

File tree

4 files changed

+171
-54
lines changed

4 files changed

+171
-54
lines changed

‎js/angular/service/platform.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,13 @@ IonicModule
1414
.constant('$ionicPlatformDefaults', {
1515
'ios': {
1616
'$ionicNavBarConfig': {
17-
transition: 'nav-title-slide-ios7',
17+
transition: 'nav-title-slide-ios',//nav-title-slide-ios7',
1818
alignTitle: 'center',
1919
backButtonIcon: 'ion-ios7-arrow-back'
2020
},
2121
'$ionicNavViewConfig': {
22-
transition: 'slide-left-right-ios7'
22+
//transition: 'slide-left-right-ios'
23+
transition: 'slide-ios'
2324
},
2425
'$ionicTabsConfig': {
2526
type: '',
@@ -28,12 +29,12 @@ IonicModule
2829
},
2930
'android': {
3031
'$ionicNavBarConfig': {
31-
transition: 'nav-title-slide-ios7',
32+
transition: 'nav-title-slide-full',
3233
alignTitle: 'center',
3334
backButtonIcon: 'ion-ios7-arrow-back'
3435
},
3536
'$ionicNavViewConfig': {
36-
transition: 'slide-left-right-ios7'
37+
transition: 'slide-full'
3738
},
3839
'$ionicTabsConfig': {
3940
type: 'tabs-striped',

‎scss/_animations.scss‎

Lines changed: 157 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -329,24 +329,28 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
329329

330330

331331
/**
332-
* iOS7 style slide left to right
332+
* iOS style slide left to right
333333
* --------------------------------------------------
334334
*/
335-
$ios7-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
336-
$ios7-transition-duration: 340ms;
335+
$ios-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
336+
$ios-transition-duration: 400ms;
337+
$ios-transition-box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
338+
/*
337339
$ios-transition-box-shadow-start: -200px 0px 200px rgba(0,0,0,0), -5px 0px 5px rgba(0,0,0,0.01);
338340
$ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px rgba(0,0,0,0.18);
341+
*/
339342

343+
.slide-ios,
340344
.slide-left-right-ios7,
341345
.slide-right-left-ios7.reverse {
342346
> .ng-enter, &.ng-enter,
343347
> .ng-leave, &.ng-leave {
344-
@include transition(all $ios7-timing-function $ios7-transition-duration);
348+
@include transition(all $ios-timing-function $ios-transition-duration);
345349
position: absolute;
346350
top: 0;
347-
right: -1px;
351+
//right: -1px;
348352
bottom: 0;
349-
left: -1px;
353+
//left: -1px;
350354
width: auto;
351355
&:not(.bar) {
352356
border-right: none;
@@ -368,25 +372,26 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
368372
}
369373
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
370374
/* OLD content ACTIVELY sliding OUT to the LEFT */
371-
@include translate3d(-15%, 0, 0);
375+
@include translate3d(-20%, 0, 0);
372376
}
373377
}
378+
.slide-ios.reverse,
374379
.slide-left-right-ios7.reverse,
375380
.slide-right-left-ios7 {
376381
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
377-
@include transition(all $ios7-timing-function $ios7-transition-duration);
382+
@include transition(all $ios-timing-function $ios-transition-duration);
378383
position: absolute;
379384
top: 0;
380-
right: -1px;
385+
//right: -1px;
381386
bottom: 0;
382-
left: -1px;
387+
//left: -1px;
383388
width: auto;
384389
border-right: none;
385390
border-left: none;
386391
}
387392
> .ng-enter, &.ng-enter {
388393
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
389-
@include translate3d(-15%, 0, 0);
394+
@include translate3d(-20%, 0, 0);
390395
}
391396
> .ng-leave, &.ng-leave {
392397
z-index: 2;
@@ -404,78 +409,109 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
404409
/**
405410
* iPad doesn't like box shadows
406411
*/
407-
/*
408-
.grade-a:not(.platform-ipad) {
412+
.grade-a {
413+
.slide-ios,
409414
.slide-left-right-ios7, .slide-right-left-ios7.reverse {
410415
> .ng-enter, &.ng-enter {
411-
box-shadow: $ios-transition-box-shadow-start;
416+
&:not(.platform-ipad) {
417+
box-shadow: none;
418+
}
412419
}
413420
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
414-
box-shadow: $ios-transition-box-shadow-end;
421+
&:not(.platform-ipad) {
422+
box-shadow: $ios-transition-box-shadow;
423+
}
415424
}
416-
}
417-
.slide-left-right-ios7.reverse, .slide-right-left-ios7 {
418425
> .ng-leave, &.ng-leave {
419-
//box-shadow: $ios-transition-box-shadow-end;
426+
opacity: 1;
420427
}
421428
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
422-
//box-shadow: $ios-transition-box-shadow-start;
429+
opacity: 0.9;
423430
}
424431
}
425-
}
426-
*/
427-
.grade-a.platform-ipad {
428-
.slide-left-right-ios7, .slide-right-left-ios7.reverse {
432+
.slide-ios.reverse,
433+
.slide-left-right-ios7.reverse, .slide-right-left-ios7 {
429434
> .ng-enter, &.ng-enter {
430-
border-left: 1px solid #ddd;
435+
opacity: 0.9;
436+
}
437+
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
438+
opacity: 1;
431439
}
432-
}
433-
434-
.slide-left-right-ios7.reverse, .slide-right-left-ios7 {
435440
> .ng-leave, &.ng-leave {
436-
border-left: 1px solid #ddd;
441+
box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
442+
opacity: 1;
443+
}
444+
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
445+
box-shadow: none;
437446
}
438447
}
439448
}
440449

450+
$full-slide-timing-function: ease-in-out;
451+
$full-slide-transition-duration: 400ms;
441452

442-
/**
443-
* Android style "pop in" with fade and scale
444-
*/
445-
.fade-explode {
453+
.slide-full {
446454
> .ng-enter, &.ng-enter,
447455
> .ng-leave, &.ng-leave {
448-
@include transition(all ease-out 300ms);
456+
@include transition(all $full-slide-timing-function $full-slide-transition-duration);
449457
position: absolute;
450458
top: 0;
451459
right: -1px;
452460
bottom: 0;
453461
left: -1px;
454462
width: auto;
455463
&:not(.bar) {
456-
border-right: 1px solid #ddd;
457-
border-left: 1px solid #ddd;
464+
border-right: none;
465+
border-left: none;
458466
}
467+
border-right: none;
468+
border-left: none;
459469
}
460470
> .ng-enter, &.ng-enter {
461471
/* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
462-
@include scale(1.6);
463-
opacity: 0;
464-
z-index: 2;
472+
@include translate3d(100%, 0, 0);
465473
}
466474
> .ng-leave, &.ng-leave {
467475
z-index: 1;
468476
}
469477
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
470478
/* NEW content ACTIVELY sliding IN from the RIGHT */
471-
@include scale(1);
472-
opacity: 1;
479+
@include translate3d(0, 0, 0);
473480
}
474481
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
475482
/* OLD content ACTIVELY sliding OUT to the LEFT */
476-
@include scale(0.95);
483+
@include translate3d(-100%, 0, 0);
477484
}
478485
}
486+
.slide-full.reverse {
487+
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
488+
@include transition(all $full-slide-timing-function $full-slide-transition-duration);
489+
position: absolute;
490+
top: 0;
491+
right: -1px;
492+
bottom: 0;
493+
left: -1px;
494+
width: auto;
495+
border-right: none;
496+
border-left: none;
497+
}
498+
> .ng-enter, &.ng-enter {
499+
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
500+
@include translate3d(-100%, 0, 0);
501+
}
502+
> .ng-leave, &.ng-leave {
503+
z-index: 2;
504+
}
505+
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
506+
/* NEW content ACTIVELY sliding IN from the LEFT */
507+
@include translate3d(0, 0, 0);
508+
}
509+
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
510+
/* OLD content ACTIVELY sliding OUT to the RIGHT */
511+
@include translate3d(100%, 0, 0);
512+
}
513+
}
514+
479515

480516
.fade-explode.reverse {
481517
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@@ -736,11 +772,12 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
736772
/**
737773
* Some component specific animations
738774
*/
739-
$nav-title-slide-ios7-delay: $ios7-transition-duration;
775+
$nav-title-slide-ios-delay: $ios-transition-duration;
776+
.nav-title-slide-ios,
740777
.nav-title-slide-ios7 {
741778
&:not(.no-animation) .button.back-button {
742-
@include transition(all $nav-title-slide-ios7-delay);
743-
@include transition-timing-function($ios7-timing-function);
779+
@include transition(all $nav-title-slide-ios-delay);
780+
@include transition-timing-function($ios-timing-function);
744781

745782
@include translate3d(0%, 0, 0);
746783
opacity: 1;
@@ -761,8 +798,8 @@ $nav-title-slide-ios7-delay: $ios7-transition-duration;
761798
}
762799
> .ng-enter, &.ng-enter,
763800
> .ng-leave, &.ng-leave {
764-
@include transition(all $nav-title-slide-ios7-delay);
765-
@include transition-timing-function($ios7-timing-function);
801+
@include transition(all $nav-title-slide-ios-delay);
802+
@include transition-timing-function($ios-timing-function);
766803
opacity: 1;
767804
}
768805
> .ng-enter, &.ng-enter {
@@ -784,8 +821,8 @@ $nav-title-slide-ios7-delay: $ios7-transition-duration;
784821
&.reverse {
785822
> .ng-enter, &.ng-enter,
786823
> .ng-leave, &.ng-leave {
787-
@include transition(all $nav-title-slide-ios7-delay);
788-
@include transition-timing-function($ios7-timing-function);
824+
@include transition(all $nav-title-slide-ios-delay);
825+
@include transition-timing-function($ios-timing-function);
789826
opacity: 1;
790827
}
791828
> .ng-enter, &.ng-enter {
@@ -803,6 +840,78 @@ $nav-title-slide-ios7-delay: $ios7-transition-duration;
803840
}
804841
}
805842

843+
844+
/**
845+
* Some component specific animations
846+
*/
847+
$nav-title-slide-full-duration: $full-slide-transition-duration;
848+
.nav-title-slide-full {
849+
&:not(.no-animation) .button.back-button {
850+
@include transition(all $nav-title-slide-full-duration);
851+
@include transition-timing-function($full-slide-timing-function);
852+
853+
@include translate3d(0%, 0, 0);
854+
opacity: 1;
855+
&.active, &.activated {
856+
opacity: 0.5;
857+
}
858+
&.ng-hide {
859+
opacity: 0;
860+
@include translate3d(30%, 0, 0);
861+
}
862+
&.ng-hide-add,
863+
&.ng-hide-remove {
864+
display: block !important;
865+
}
866+
&.ng-hide-add {
867+
position: absolute;
868+
}
869+
}
870+
> .ng-enter, &.ng-enter,
871+
> .ng-leave, &.ng-leave {
872+
@include transition(all $nav-title-slide-full-duration);
873+
@include transition-timing-function($full-slide-timing-function);
874+
opacity: 1;
875+
}
876+
> .ng-enter, &.ng-enter {
877+
@include translate3d(30%, 0, 0);
878+
opacity: 0;
879+
&.title {
880+
@include translate3d(100%, 0, 0);
881+
}
882+
}
883+
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
884+
@include translate3d(0, 0, 0);
885+
opacity: 1;
886+
}
887+
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
888+
@include translate3d(-30%, 0, 0);
889+
opacity: 0;
890+
}
891+
892+
&.reverse {
893+
> .ng-enter, &.ng-enter,
894+
> .ng-leave, &.ng-leave {
895+
@include transition(all $nav-title-slide-full-duration);
896+
@include transition-timing-function($full-slide-timing-function);
897+
opacity: 1;
898+
}
899+
> .ng-enter, &.ng-enter {
900+
@include translate3d(-30%, 0, 0);
901+
opacity: 0;
902+
}
903+
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
904+
@include translate3d(0, 0, 0);
905+
opacity: 1;
906+
}
907+
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
908+
@include translate3d(100%, 0, 0);
909+
opacity: 0;
910+
}
911+
}
912+
}
913+
914+
806915
$nav-title-android-delay: 200ms;
807916
$nav-title-android-timing-function: linear;
808917

‎scss/_scaffolding.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -346,3 +346,12 @@ ion-infinite-scroll {
346346
background-color: $base-background-color;
347347
overflow: hidden;
348348
}
349+
350+
ion-nav-view {
351+
position: absolute;
352+
top: 0;
353+
left: 0;
354+
width: 100%;
355+
height: 100%;
356+
background-color: #000;
357+
}

‎test/html/nav.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@
2424
<ion-view title="Page 1">
2525
<ion-nav-buttons side="right">
2626
<button class="button button-icon ion-android-search"></button>
27-
<button class="button button-icon ion-android-information"></button>
28-
<button class="button button-icon ion-android-share"></button>
2927
</ion-nav-buttons>
3028
<ion-content padding="true">
3129
<ion-list>

0 commit comments

Comments
 (0)