.slide-left-right-ios7 updates

2026-03-13 10:22:08 +08:00 · 2013-11-28 22:33:04 -06:00
parent 57b4914cf5
commit 0d6a8346d6
3 changed files with 70 additions and 78 deletions
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -5224,13 +5224,11 @@ a.button {
 * 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;
-  transition: all 250ms;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  -moz-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+.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 cubic-bezier(0.1, 0.75, 0.3, 0.95) 750ms;
+  -moz-transition: all cubic-bezier(0.1, 0.75, 0.3, 0.95) 750ms;
+  transition: all cubic-bezier(0.1, 0.75, 0.3, 0.95) 750ms;
  position: absolute;
  top: 0;
  right: 0;
@@ -5238,45 +5236,44 @@ a.button {
  left: 0;
  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 {
+  /* 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-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 */
+  /* 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-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); }
+  /* OLD content ACTIVELY sliding OUT to the LEFT */
+  -webkit-transform: translate3d(-15%, 0, 0);
+  -moz-transform: translate3d(-15%, 0, 0);
+  transform: translate3d(-15%, 0, 0); }
 .slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter, .slide-left-right-ios7.reverse > .ng-leave, .slide-left-right-ios7.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-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  -moz-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  -webkit-transition: all cubic-bezier(0.1, 0.75, 0.3, 0.95) 750ms;
+  -moz-transition: all cubic-bezier(0.1, 0.75, 0.3, 0.95) 750ms;
+  transition: all cubic-bezier(0.1, 0.75, 0.3, 0.95) 750ms;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }
 .slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.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-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 */
+  /* 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-ios7.reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7.reverse.ng-leave.ng-leave-active {
-  /* 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); }
+  /* OLD content ACTIVELY sliding OUT to the RIGHT */
+  -webkit-transform: translate3d(15%, 0, 0);
+  -moz-transform: translate3d(15%, 0, 0);
+  transform: translate3d(15%, 0, 0); }

 .slide-in-left {
  -webkit-transform: translate3d(0%, 0, 0);
@@ -5573,9 +5570,9 @@ a.button {
  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  transition: all 350ms;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  -moz-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.75, 0.3, 0.95);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.75, 0.3, 0.95);
+  transition-timing-function: cubic-bezier(0.1, 0.75, 0.3, 0.95);
  opacity: 1; }
 .nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter {
  -webkit-transform: translate3d(30%, 0, 0);
@@ -5598,9 +5595,9 @@ a.button {
  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  transition: all 350ms;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  -moz-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.75, 0.3, 0.95);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.75, 0.3, 0.95);
+  transition-timing-function: cubic-bezier(0.1, 0.75, 0.3, 0.95);
  opacity: 1; }
 .reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter {
  -webkit-transform: translate3d(-30%, 0, 0);
--- a/examples/starters/list/index.html
+++ b/examples/starters/list/index.html
@@ -5,13 +5,7 @@
    <title>Ionic List Example</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

-    <link id="css" rel="stylesheet">
-    <script>
-      document.getElementById("css").href = "/dist/css/ionic.css?r=" + Math.random();
-    </script>
-
-    <!-- ionic css 
-    <link href="/dist/css/ionic.css" rel="stylesheet">-->
+    <link href="/dist/css/ionic.css" rel="stylesheet">

    <!-- ionic/angularjs scripts -->
    <script src="/dist/js/ionic.js"></script>
@@ -33,7 +27,7 @@
    'nav-router' attribute updates the nav-bar title and animations as you navigate
    'animation' attribute sets which type of animations to use
  -->
-  <body ng-app="listExample" nav-router animation="slide-left-right">
+  <body ng-app="listExample" nav-router animation="slide-left-right-ios7">

    <!-- The nav bar that will be updated as we navigate -->
    <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -1,5 +1,3 @@
-$ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
-$transition-time: 250ms;

 /**
 * Animations
@@ -8,10 +6,11 @@ $transition-time: 250ms;
 * and pretty easy on performance. They can be overidden
 * and enhanced easily.
 */
+ $transition-duration: 250ms;

 .noop-animation {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-    @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
+    @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-duration);
    position: absolute;
    top: 0;
    right: 0;
@@ -37,7 +36,7 @@ $transition-time: 250ms;
 .slide-left-right {
  > .ng-enter, &.ng-enter, 
  > .ng-leave, &.ng-leave {
-    @include transition(all ease-in-out $transition-time);
+    @include transition(all ease-in-out $transition-duration);
    position: absolute;
    top: 0;
    right: 0;
@@ -61,14 +60,13 @@ $transition-time: 250ms;

  &.reverse {
    > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-      @include transition(all ease-in-out $transition-time);
+      @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);
@@ -91,71 +89,74 @@ $transition-time: 250ms;
 * iOS7 style slide left to right 
 * --------------------------------------------------
 */
+$ios7-timing-function: cubic-bezier(.10, .75, .30, .95);
+$ios7-transition-duration: 750ms;

 .slide-left-right-ios7 {
-  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-    @include transition(all $transition-time);
-    @include transition-timing-function($ios7-timing-function);
-    position:absolute;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
+  > .ng-enter, &.ng-enter, 
+  > .ng-leave, &.ng-leave {
+    @include transition(all $ios7-timing-function $ios7-transition-duration);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
    box-shadow: $menu-side-shadow;
  }
  > .ng-enter, &.ng-enter {
+    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
    @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 */
+    /* NEW content ACTIVELY sliding IN from the RIGHT */
    @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);
+    /* OLD content ACTIVELY sliding OUT to the LEFT */
+    @include translate3d(-15%, 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) $transition-time);
-      @include transition-timing-function($ios7-timing-function);
-      position:absolute;
-      top:0;
-      right:0;
-      bottom:0;
-      left:0;
+      @include transition(all $ios7-timing-function $ios7-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);
-      //.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 */
+      /* NEW content ACTIVELY sliding IN from the LEFT */
      @include translate3d(0, 0, 0);
      //.scroll { background: orange; } //for debugging
    }
    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
-      /* the OLD content actively sliding OUT from LEFT to RIGHT */
-      @include translate3d(20%, 0, 0);
+      /* OLD content ACTIVELY sliding OUT to the RIGHT */
+      @include translate3d(15%, 0, 0);
      //.scroll { background: maroon; } //for debugging
    }
  }
 }

+
+
 .slide-in-left {
  @include translate3d(0%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideInFromLeft);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideOutToLeft);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
@@ -164,7 +165,7 @@ $transition-time: 250ms;

 .slide-in-left-add {
  @include translate3d(100%,0,0);
-  @include animation-duration($transition-time);
+  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
 }
@@ -176,13 +177,13 @@ $transition-time: 250ms;
  @include translate3d(-100%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideOutToLeft);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideOutToLeft);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
@@ -193,7 +194,7 @@ $transition-time: 250ms;

 .slide-out-left-add {
  @include translate3d(0,0,0);
-  @include animation-duration($transition-time);
+  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
 }
@@ -205,13 +206,13 @@ $transition-time: 250ms;
  @include translate3d(0%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideInFromRight);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideInFromRight);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
@@ -219,7 +220,7 @@ $transition-time: 250ms;

 .slide-in-right-add {
  @include translate3d(-100%,0,0);
-  @include animation-duration($transition-time);
+  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
 }
@@ -231,13 +232,13 @@ $transition-time: 250ms;
  @include translate3d(100%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideOutToRight);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideOutToRight);
-    @include animation-duration($transition-time);
+    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
@@ -247,7 +248,7 @@ $transition-time: 250ms;
 }
 .slide-out-right-add {
  @include translate3d(0,0,0);
-  @include animation-duration($transition-time);
+  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
 }