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

update values for .reverse animations

Browse Source
This commit is contained in:
Adam Bradley
2013-11-27 21:08:46 -06:00
parent fc909e1612
commit c2f812f0f2
2 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
dist/css/ionic.css vendored
View File

@@ -3207,7 +3207,7 @@ a.subdued {
background-color: #fff; }
.menu-content {
box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0, 0, 0, 0.2); }
box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0, 0, 0, 0.2); }
.menu-left {
left: 0; }
@@ -5056,6 +5056,10 @@ a.button {
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
/**
* iOS7 style slide left to right
* --------------------------------------------------
*/
.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter, .slide-left-right-ios7 > .ng-leave, .slide-left-right-ios7.ng-leave {
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
@@ -5068,16 +5072,18 @@ a.button {
right: 0;
bottom: 0;
left: 0;
box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0, 0, 0, 0.2); }
box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0, 0, 0, 0.2); }
.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
.slide-left-right-ios7 > .ng-enter.ng-enter-active, .slide-left-right-ios7.ng-enter.ng-enter-active {
/* the NEW content actively sliding IN from RIGHT to LEFT */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slide-left-right-ios7 > .ng-leave.ng-leave-active, .slide-left-right-ios7.ng-leave.ng-leave-active {
/* the OLD content actively sliding OUT from RIGHT to LEFT */
-webkit-transform: translate3d(-20%, 0, 0);
-moz-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); }
@@ -5094,17 +5100,19 @@ a.button {
bottom: 0;
left: 0; }
.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter {
-webkit-transform: translate3d(-20%, 0, 0);
-moz-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); }
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
.slide-left-right-ios7.reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7.reverse.ng-enter.ng-enter-active {
/* the NEW content actively sliding IN from LEFT to RIGHT */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slide-left-right-ios7.reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7.reverse.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
/* the OLD content actively sliding OUT from LEFT to RIGHT */
-webkit-transform: translate3d(20%, 0, 0);
-moz-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0); }
@-webkit-keyframes slideInLeft {
0% {

58
scss/_animations.scss
View File

@@ -1,4 +1,5 @@
$ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
$transition-time: 250ms;
/**
* Animations
@@ -10,7 +11,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
.noop-animation {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms);
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
position:absolute;
top:0;
right:0;
@@ -21,7 +22,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
.slide-left-right {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms);
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
position:absolute;
top:0;
right:0;
@@ -40,7 +41,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
&.reverse {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms);
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
position:absolute;
top:0;
right:0;
@@ -58,9 +59,16 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
}
}
}
/**
* iOS7 style slide left to right
* --------------------------------------------------
*/
.slide-left-right-ios7 {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all 250ms);
@include transition(all $transition-time);
@include transition-timing-function($ios7-timing-function);
position:absolute;
top:0;
@@ -71,17 +79,22 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
}
> .ng-enter, &.ng-enter {
@include translate3d(100%, 0, 0);
//.scroll { background: yellow; } //for debugging
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
/* the NEW content actively sliding IN from RIGHT to LEFT */
@include translate3d(0, 0, 0);
//.scroll { background: red; } //for debugging
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
/* the OLD content actively sliding OUT from RIGHT to LEFT */
@include translate3d(-20%, 0, 0);
//.scroll { background: blue; } //for debugging
}
&.reverse {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms);
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
@include transition-timing-function($ios7-timing-function);
position:absolute;
top:0;
@@ -90,17 +103,23 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
left:0;
}
> .ng-enter, &.ng-enter {
@include translate3d(-20%, 0, 0);
@include translate3d(-100%, 0, 0);
//.scroll { background: green; } //for debugging
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
/* the NEW content actively sliding IN from LEFT to RIGHT */
@include translate3d(0, 0, 0);
//.scroll { background: orange; } //for debugging
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
@include translate3d(100%, 0, 0);
/* the OLD content actively sliding OUT from LEFT to RIGHT */
@include translate3d(20%, 0, 0);
//.scroll { background: maroon; } //for debugging
}
}
}
@-webkit-keyframes slideInLeft {
0% {
@include translate3d(100%, 0, 0);
@@ -138,13 +157,13 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
@include translate3d(0%,0,0);
&.ng-enter, > .ng-enter {
@include animation-name(slideInLeft);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
&.ng-leave, > .ng-leave {
@include animation-name(slideOutLeft);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -153,7 +172,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
.slide-in-left-add {
@include translate3d(100%,0,0);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -165,13 +184,13 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
@include translate3d(-100%,0,0);
&.ng-enter, > .ng-enter {
@include animation-name(slideOutLeft);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
&.ng-leave, > .ng-leave {
@include animation-name(slideOutLeft);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -182,7 +201,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
.slide-out-left-add {
@include translate3d(0,0,0);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -194,13 +213,13 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
@include translate3d(0%,0,0);
&.ng-enter, > .ng-enter {
@include animation-name(slideInRight);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
&.ng-leave, > .ng-leave {
@include animation-name(slideInRight);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -208,7 +227,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
.slide-in-right-add {
@include translate3d(-100%,0,0);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -220,13 +239,13 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
@include translate3d(100%,0,0);
&.ng-enter, > .ng-enter {
@include animation-name(slideOutRight);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
&.ng-leave, > .ng-leave {
@include animation-name(slideOutRight);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -236,7 +255,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
}
.slide-out-right-add {
@include translate3d(0,0,0);
@include animation-duration(250ms);
@include animation-duration($transition-time);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
@@ -361,7 +380,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
}
/**
* Some component specific animations
*/