Fixed initial animation issue

dist/css/ionic.css

@@ -183,7 +183,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -630,13 +630,13 @@ address {
   font-style: normal;
   line-height: 1.42857; }
 
-a.subdued‎ {
+a.subduedΓÇÄ {
   padding-right: 10px;
   color: #f8f8f8;
   text-decoration: none; }
-  a.subdued‎:hover {
+  a.subduedΓÇÄ:hover {
     text-decoration: none; }
-  a.subdued‎:last-child {
+  a.subduedΓÇÄ:last-child {
     padding-right: 0; }
 
 /**
@@ -2329,7 +2329,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -2344,7 +2344,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -2797,7 +2797,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
   .button-icon .icon {
     font-size: 32px; }
 
@@ -2911,6 +2911,15 @@ a.button {
  * and pretty easy on performance. They can be overidden
  * and enhanced easily.
  */
+.noop-animation > .ng-enter, .noop-animation.ng-enter, .noop-animation > .ng-leave, .noop-animation.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-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; }
+
 .slide-left-right > .ng-enter, .slide-left-right.ng-enter, .slide-left-right > .ng-leave, .slide-left-right.ng-leave {
   position: absolute;
   top: 0;
@@ -3522,7 +3531,7 @@ a.button {
 .platform-ios7 .has-header {
   margin-top: 64px; }
 
-/*
+/*!
   Ionicons, v1.3.5
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework

dist/css/themes/ionic-ios7.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */
@@ -119,7 +118,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -134,4 +133,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }

dist/js/ionic-angular.js

@@ -25291,16 +25291,24 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
+      $element.addClass('noop-animation');
+
       var isFirst = true;
 
+      var initTransition = function() {
+        //$element.addClass($scope.animation);
+      };
+
       var reverseTransition = function() {
         console.log('REVERSE');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation);
         $element.addClass($scope.animation + '-reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation + '-reverse');
         $element.addClass($scope.animation);
       };
@@ -25316,7 +25324,7 @@ angular.module('ionic.ui.navRouter', [])
 
         if(isFirst) {
           // Don't animate
-          //return;
+          return;
         }
 
         if(back) {
@@ -25332,9 +25340,7 @@ angular.module('ionic.ui.navRouter', [])
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
-          $timeout(function() {
+          initTransition();
-            //reverseTransition();
-          }, 200);
         }
       });  
 

js/ext/angular/src/directive/ionicNavRouter.js

@@ -31,16 +31,24 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
+      $element.addClass('noop-animation');
+
       var isFirst = true;
 
+      var initTransition = function() {
+        //$element.addClass($scope.animation);
+      };
+
       var reverseTransition = function() {
         console.log('REVERSE');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation);
         $element.addClass($scope.animation + '-reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
+        $element.removeClass('noop-animation');
         $element.removeClass($scope.animation + '-reverse');
         $element.addClass($scope.animation);
       };
@@ -56,7 +64,7 @@ angular.module('ionic.ui.navRouter', [])
 
         if(isFirst) {
           // Don't animate
-          //return;
+          return;
         }
 
         if(back) {
@@ -72,9 +80,7 @@ angular.module('ionic.ui.navRouter', [])
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
-          $timeout(function() {
+          initTransition();
-            //reverseTransition();
-          }, 200);
         }
       });  
 

js/ext/angular/test/navRouter.html

@@ -18,6 +18,7 @@
     <script id="page1.html" type="text/ng-template">
       <pane>
         <h1>Page 1</h1>
+        <span>{{num}}</span>
         <a class="button button-pure" nav-back>Back</a>
         <a class="button button-assertive" href="#/page2">Next</a>
       </pane>
@@ -42,6 +43,7 @@
       .config(function($routeProvider, $locationProvider) {
         $routeProvider.when('/page1', {
           templateUrl: 'page1.html',
+          controller: 'Page1Ctrl'
         });
 
         $routeProvider.when('/page2', {
@@ -58,6 +60,10 @@
         // configure html5 to get links working on jsfiddle
         //$locationProvider.html5Mode(true);
 
+      })
+
+      .controller('Page1Ctrl', function($scope) {
+        $scope.num = Math.floor(Math.random() * 100);
       });
 
       

scss/_animations.scss

@@ -7,6 +7,18 @@
  * and enhanced easily.
  */
 
+.noop-animation {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+  }
+}
+
 .slide-left-right {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     position:absolute;