basic nav animations working

components/ionBody/ionBody.js

@@ -4,7 +4,7 @@ isIOS = function () {
 
 Template.ionBody.helpers({
   platformClasses: function () {
-    var classes = [];
+    var classes = ['grade-a'];
 
     if (Meteor.isCordova) {
       classes.push('platform-cordova');
@@ -32,6 +32,6 @@ Template.ionBody.events({
   },
 
   'click [data-nav-direction]': function (event, template) {
-    IonNavView.navDirection = $(event.target).data('nav-direction');
+    Session.set('navDirection', $(event.target).data('nav-direction'));
   }
 });

components/ionNavView/ionNavView.html

@@ -1,5 +1,5 @@
 <template name="ionNavView">
-  <div data-navigation-container>
+  <div class="{{classes}}" data-navigation-container>
     {{> UI.contentBlock}}
   </div>
 </template>

components/ionNavView/ionNavView.js

@@ -1,57 +1,62 @@
 IonNavView = {
-  currentAnimation: 'slide-ios',
-  animationDuration: 250,
-  animationEndEvent: 'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd'
+  animation: 'slide-left-right',
+  animationDuration: 250
 };
 
 Template.ionNavView.created = function () {
-  IonNavView.animation = 'slide-left-right';
-  if (this.data.animation) {
+  if (this.data && this.data.animation) {
     IonNavView.animation = this.data.animation;
   }
-
-  this.title = this.data.animation;
 };
 
 Template.ionNavView.rendered = function () {
-  if (this.title) {
-
-  }
-
   this.find('[data-navigation-container]')._uihooks = {
     insertElement: function(node, next) {
-      if (!IonNavView.currentAnimation) {
+      if (!IonNavView.animation || !$(node).hasClass('view')) {
         $(node).insertBefore(next);
         return;
       }
 
-      var classes = ['ng-enter', IonNavView.currentAnimation];
-
-      if (IonNavView.navDirection) {
-        classes.push(IonNavView.navDirection);
-        IonNavView.navDirection = undefined;
-      }
-
-      $(node).insertBefore(next).addClass(classes.join(' '));
-
+      $(node).insertBefore(next).addClass('ng-enter');
       Meteor.setTimeout(function() {
         $(node).addClass('ng-enter-active');
       }, 10);
 
-      $(node).on(IonNavView.animationEndEvent, function () {
-        $(this).removeClass(classes).removeClass('ng-enter-active').off('webkitAnimationEnd');
-      });
+      Meteor.setTimeout(function () {
+        $(this).removeClass('ng-enter ng-enter-active');
+      }, IonNavView.animationDuration);
     },
 
     removeElement: function(node) {
-      if (!IonNavView.currentAnimation) {
+      if (!IonNavView.animation || !$(node).hasClass('view')) {
         $(node).remove();
         return;
       }
 
+      $(node).addClass('ng-leave');
+      Meteor.setTimeout(function() {
+        $(node).addClass('ng-leave-active');
+      }, 10);
+
       Meteor.setTimeout(function () {
+        $(node).removeClass('ng-leave ng-lavel-active');
         $(node).remove();
+        Session.set('navDirection', undefined);
       }, IonNavView.animationDuration);
     }
   };
 };
+
+
+Template.ionNavView.helpers({
+  classes: function () {
+    console.log('calculating classes');
+    var classes = [IonNavView.animation];
+
+    if (Session.get('navDirection')) {
+      classes.push(Session.get('navDirection'));
+    }
+
+    return classes.join(' ');
+  }
+});

components/ionView/ionView.html

@@ -1,5 +1,5 @@
 <template name="ionView">
-  <div class="view">
+  <div class="{{classes}}">
     {{> UI.contentBlock}}
   </div>
 </template>

components/ionView/ionView.js

@@ -0,0 +1,11 @@
+Template.ionView.helpers({
+  classes: function () {
+    var classes = ['view'];
+
+    if (this.class) {
+      classes.push(this.class);
+    }
+
+    return classes.join(' ');
+  }
+});