Permalink
Browse files

fix up the navigation view animations and dom handling

no longer clone the old content div so it preserves things like scroll position when the animation starts
  • Loading branch information...
1 parent ed8a938 commit 26e1915402edb44e019b3362b34c43da9c5c14e2 @dbecher dbecher committed Mar 7, 2013
Showing with 17 additions and 14 deletions.
  1. +3 −4 css/styles.css
  2. +14 −10 js/views/navigation.js
View
@@ -182,10 +182,6 @@ p.note {
transition-timing-function: ease-in-out;
}
.navigation-view .old-content {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
@@ -235,6 +231,9 @@ p.note {
right: 0;
overflow: hidden;
}
+.navigation-view .old-header {
+ background: none;
+}
.navigation-view .old-header h1,
.navigation-view .old-header .backBarButton {
-webkit-transform: translate3d(0, 0, 0);
View
@@ -89,6 +89,8 @@
this._clearButtonListeners();
var view = this.currentView = this.views[this.views.length-1];
+ var oldTitle = this.$header.clone().addClass('old-header').appendTo(this.el);
+
// add title and bar buttons
this.$title.html(view.title || "");
this.$rightBarButtons.empty();
@@ -103,29 +105,30 @@
// don't do animation if there was no previous view
var doAnimation = (this.$content.html() !== '') ? true : false;
- var oldView, oldTitle;
+ var oldView = this.$content;
if(doAnimation) {
- // put the old content in temp container
- oldView = $('<div class="old-content"></div>').html(this.$content.html());
- oldView.addClass(this.$content.attr('class') || '');
+ this.$content.addClass('old-content');
}
// put the new view.$el into this.$content
- this.$content.html(view.$el);
+ this.$content = this.$content.clone().html(view.el).removeClass('old-content');
+ this.$el.append(this.$content);
if(doAnimation) {
this.$content.addClass('new-content');
- this.$content.parent().append(oldView);
$animatable.push(oldView[0], this.$content[0]);
}
+ else {
+ oldView.remove();
+ }
if(doAnimation) {
- // put the old title/header into a temporary container
- var oldTitle = $('<div class="old-header"></div>').html(this.$header.html());
- oldTitle.addClass(this.$header.attr('class') || '');
- this.$header.addClass('new-header').parent().prepend(oldTitle);
+ this.$header.addClass('new-header');
$animatable.push(oldTitle[0], this.$header[0]);
}
+ else {
+ oldTitle.remove();
+ }
// setup navigation property on view and call onVisible
if(_.isFunction(view.onVisible)) {
@@ -140,6 +143,7 @@
oldTitle.remove();
this.$header.removeClass('new-header animate go back');
if(_.isFunction(cb)) cb();
+ delete oldTitle, oldView;
}, this), 500);
if(back) {

0 comments on commit 26e1915

Please sign in to comment.