android animation fixes

2026-03-13 10:22:08 +08:00 · 2013-11-28 19:35:40 -06:00
parent 1e95015070
commit ac22184ecd
5 changed files with 97 additions and 44 deletions
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -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;
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -1416,9 +1416,11 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
    }],

    link: function($scope, $element, $attr) {
+      if(!$element.length) return;
+      
      $scope.animation = $attr.animation;

-      $element.addClass('noop-animation');
+      $element[0].classList.add('noop-animation');

      var isFirst = true;
      // Store whether we did an animation yet, to know if
@@ -1430,15 +1432,15 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
      };

      var reverseTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.addClass($scope.animation);
-        $element.addClass('reverse');
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.add($scope.animation);
+        $element[0].classList.add('reverse');
      };

      var forwardTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.removeClass('reverse');
-        $element.addClass($scope.animation);
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.remove('reverse');
+        $element[0].classList.add($scope.animation);
      };

      $scope.$on('$routeChangeSuccess', function(e, a) {
--- a/examples/starters/list/index.html
+++ b/examples/starters/list/index.html
@@ -5,8 +5,13 @@
    <title>Ionic List Example</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

-    <!-- ionic css -->
-    <link href="/dist/css/ionic.css" rel="stylesheet">
+    <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">-->

    <!-- ionic/angularjs scripts -->
    <script src="/dist/js/ionic.js"></script>
@@ -28,7 +33,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-ios7">
+  <body ng-app="listExample" nav-router animation="slide-left-right">

    <!-- 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/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -41,9 +41,11 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
    }],

    link: function($scope, $element, $attr) {
+      if(!$element.length) return;
+      
      $scope.animation = $attr.animation;

-      $element.addClass('noop-animation');
+      $element[0].classList.add('noop-animation');

      var isFirst = true;
      // Store whether we did an animation yet, to know if
@@ -55,15 +57,15 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
      };

      var reverseTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.addClass($scope.animation);
-        $element.addClass('reverse');
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.add($scope.animation);
+        $element[0].classList.add('reverse');
      };

      var forwardTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.removeClass('reverse');
-        $element.addClass($scope.animation);
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.remove('reverse');
+        $element[0].classList.add($scope.animation);
      };

      $scope.$on('$routeChangeSuccess', function(e, a) {
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -12,50 +12,76 @@ $transition-time: 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);
-    position:absolute;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
  }
 }

+
+// required for Android
+.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, &.ng-enter, > .ng-leave, &.ng-leave {
-    @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
-    position:absolute;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
+  > .ng-enter, &.ng-enter, 
+  > .ng-leave, &.ng-leave {
+    @include transition(all ease-in-out $transition-time);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
  }
  > .ng-enter, &.ng-enter {
+    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
    @include translate3d(100%, 0, 0);
  }
  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    /* NEW content ACTIVELY sliding IN from the RIGHT */
    @include translate3d(0, 0, 0);
+    //.scroll { background: purple; } //for debugging
  }
  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    /* OLD content ACTIVELY sliding OUT to the LEFT */
    @include translate3d(-100%, 0, 0);
+    //.scroll { background: green; } //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);
-      position:absolute;
-      top:0;
-      right:0;
-      bottom:0;
-      left:0;
+      @include transition(all ease-in-out $transition-time);
+      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);
+      //.scroll { background: blue; } //for debugging
    }
    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      /* OLD content ACTIVELY sliding OUT to the RIGHT */
      @include translate3d(100%, 0, 0);
+      //.scroll { background: yellow; } //for debugging
    }
  }
 }
@@ -301,7 +327,8 @@ $transition-time: 250ms;
 */

 .nav-title-slide-ios7 {
-  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+  > .ng-enter, &.ng-enter, 
+  > .ng-leave, &.ng-leave {
    @include transition(all 350ms);
    @include transition-timing-function($ios7-timing-function);
    opacity: 1;