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

feat(animation): Add right to left animations, and their reverse, for RTL support, closes #643

Browse Source
This commit is contained in:
Adam Bradley
2014-03-13 23:18:00 -05:00
parent ba2a40c845
commit 4628b9fb23
1 changed files with 52 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
scss/_animations.scss
View File

@@ -272,13 +272,14 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
/**
* Slide Left-Right
* Slide Left-Right, and Right-Left, each with the reserve
* --------------------------------------------------
* 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 {
.slide-left-right,
.slide-right-left.reverse {
> .ng-enter, &.ng-enter,
> .ng-leave, &.ng-leave {
@include transition(all ease-in-out $transition-duration);
@@ -300,28 +301,29 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
/* OLD content ACTIVELY sliding OUT to the LEFT */
@include translate3d(-100%, 0, 0);
}
}
&.reverse {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all ease-in-out $transition-duration);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
> .ng-enter, &.ng-enter {
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
@include translate3d(-100%, 0, 0);
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
/* NEW content ACTIVELY sliding IN from the LEFT */
@include translate3d(0, 0, 0);
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
/* OLD content ACTIVELY sliding OUT to the RIGHT */
@include translate3d(100%, 0, 0);
}
.slide-left-right.reverse,
.slide-right-left {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all ease-in-out $transition-duration);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
> .ng-enter, &.ng-enter {
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
@include translate3d(-100%, 0, 0);
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
/* NEW content ACTIVELY sliding IN from the LEFT */
@include translate3d(0, 0, 0);
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
/* OLD content ACTIVELY sliding OUT to the RIGHT */
@include translate3d(100%, 0, 0);
}
}
@@ -333,7 +335,8 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
$ios7-timing-function: ease-in-out;
$ios7-transition-duration: 250ms;
.slide-left-right-ios7 {
.slide-left-right-ios7,
.slide-right-left-ios7.reverse {
> .ng-enter, &.ng-enter,
> .ng-leave, &.ng-leave {
@include transition(all $ios7-timing-function $ios7-transition-duration);
@@ -358,31 +361,31 @@ $ios7-transition-duration: 250ms;
/* OLD content ACTIVELY sliding OUT to the LEFT */
@include translate3d(-15%, 0, 0);
}
&.reverse {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all $ios7-timing-function $ios7-transition-duration);
position: absolute;
top: 0;
right: -1px;
bottom: 0;
left: -1px;
width: auto;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
> .ng-enter, &.ng-enter {
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
@include translate3d(-100%, 0, 0);
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
/* NEW content ACTIVELY sliding IN from the LEFT */
@include translate3d(0, 0, 0);
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
/* OLD content ACTIVELY sliding OUT to the RIGHT */
@include translate3d(15%, 0, 0);
}
}
.slide-left-right-ios7.reverse,
.slide-right-left-ios7 {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all $ios7-timing-function $ios7-transition-duration);
position: absolute;
top: 0;
right: -1px;
bottom: 0;
left: -1px;
width: auto;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
> .ng-enter, &.ng-enter {
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
@include translate3d(-100%, 0, 0);
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
/* NEW content ACTIVELY sliding IN from the LEFT */
@include translate3d(0, 0, 0);
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
/* OLD content ACTIVELY sliding OUT to the RIGHT */
@include translate3d(15%, 0, 0);
}
}