javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

android animation fixes

Browse Source
This commit is contained in:
Adam Bradley
2013-11-28 19:35:40 -06:00
parent 1e95015070
commit ac22184ecd
5 changed files with 97 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
dist/css/ionic.css vendored
View File

@@ -5155,45 +5155,61 @@ a.button {
bottom: 0;
left: 0; }
.slide-left-right > .ng-enter, .slide-left-right.ng-enter, .slide-left-right > .ng-leave, .slide-left-right.ng-leave {
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
-moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
.ng-animate .pane {
position: absolute; }
/**
* Slide Left-Right
* --------------------------------------------------
* NEW content slides IN from the RIGHT, OLD slides OUT to the LEFT
* Reverse: NEW content slides IN from the LEFT, OLD slides OUT to the RIGHT
*/
.slide-left-right > .ng-enter, .slide-left-right.ng-enter,
.slide-left-right > .ng-leave, .slide-left-right.ng-leave {
-webkit-transition: all ease-in-out 250ms;
-moz-transition: all ease-in-out 250ms;
transition: all ease-in-out 250ms;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.slide-left-right > .ng-enter, .slide-left-right.ng-enter {
/* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
.slide-left-right > .ng-enter.ng-enter-active, .slide-left-right.ng-enter.ng-enter-active {
/* NEW content ACTIVELY sliding IN from the RIGHT */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
/* OLD content ACTIVELY sliding OUT to the LEFT */
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter, .slide-left-right.reverse > .ng-leave, .slide-left-right.reverse.ng-leave {
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
-moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
-webkit-transition: all ease-in-out 250ms;
-moz-transition: all ease-in-out 250ms;
transition: all ease-in-out 250ms;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter {
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
.slide-left-right.reverse > .ng-enter.ng-enter-active, .slide-left-right.reverse.ng-enter.ng-enter-active {
/* NEW content ACTIVELY sliding IN from the LEFT */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slide-left-right.reverse > .ng-leave.ng-leave-active, .slide-left-right.reverse.ng-leave.ng-leave-active {
/* OLD content ACTIVELY sliding OUT to the RIGHT */
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@@ -5546,7 +5562,8 @@ a.button {
/**
* Some component specific animations
*/
.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter,
.nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
transition: all 350ms;