feat(animation): Add right to left animations, and their reverse, for…

… RTL support, closes #643
ionic-team · Mar 14, 2014 · 4628b9f · 4628b9f
1 parent ba2a40c
commit 4628b9f
Showing 1 changed file with 52 additions and 49 deletions.
diff --git a/scss/_animations.scss b/scss/_animations.scss
@@ -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);
   }
 }