sproutcore 1.10.0.rc.3 → 1.10.0

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view.js

@@ -283,7 +283,7 @@ SC.CoreView.reopen(
   displayDidChange: function () {
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — displayDidChange()'.fmt(this, this.get('viewState')));
+      SC.Logger.log('%c%@:%@ — displayDidChange()'.fmt(this, this.get('viewState')), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
@@ -1881,6 +1881,10 @@ SC.CoreView.unload = function () {
    - `render` -- override this method to generate or update your HTML to reflect
      the current state of your view.  This method is called both when your view
      is first created and later anytime it needs to be updated.
+   - `update` -- Normally, when a view needs to update its content, it will
+     re-render the view using the render() method.  If you would like to
+     override this behavior with your own custom updating code, you can
+     replace update() with your own implementation instead.
    - `didCreateLayer` -- the render() method is used to generate new HTML.
      Override this method to perform any additional setup on the DOM you might
      need to do after creating the view.  For example, if you need to listen
@@ -1888,10 +1892,6 @@ SC.CoreView.unload = function () {
    - `willDestroyLayer` -- if you implement didCreateLayer() to setup event
      listeners, you should implement this method as well to remove the same
      just before the DOM for your view is destroyed.
-   - `updateLayer` -- Normally, when a view needs to update its content, it will
-     re-render the view using the render() method.  If you would like to
-     override this behavior with your own custom updating code, you can
-     replace updateLayer() with your own implementation instead.
    - `didAppendToDocument` -- in theory all DOM setup could be done
      in didCreateLayer() as you already have a DOM element instantiated.
      However there is cases where the element has to be first appended to the
@@ -1899,6 +1899,9 @@ SC.CoreView.unload = function () {
      plugins which objects are not instantiated until you actually append the
      element to the DOM. This will allow you to do things like registering
      DOM events on flash or quicktime objects.
+   - `willRemoveFromDocument` -- This method is called on the view immediately
+     before its layer is removed from the DOM. You can use this to reverse any
+     setup that is performed in `didAppendToDocument`.
 
   @extends SC.Responder
   @extends SC.DelegateSupport

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/animation.js

@@ -83,6 +83,21 @@ SC.LayoutState = {
 SC.View.reopen(
   /** @scope SC.View.prototype */ {
 
+  /* @private Internal variable to store the active (i.e. applied) animations. */
+  _activeAnimations: null,
+
+  /* @private Internal variable to store the count of active animations. */
+  _activeAnimationsLength: null,
+
+  /* @private Internal variable to store the animation layout until the next run loop when it can be safely applied. */
+  _animateLayout: null,
+
+  /* @private Internal variable to store the pending (i.e. not yet applied) animations. */
+  _pendingAnimations: null,
+
+  /* @private Internal variable to store the previous layout for in case the animation is cancelled and meant to return to original point. */
+  _prevLayout: null,
+
   /**
     Method protocol.
 
@@ -214,7 +229,7 @@ SC.View.reopen(
 
     @param {Object|String} properties Hash of property names with new layout values or a single property name.
     @param {Number} [value] The new layout value for a single property (only provide if the first parameter is a String).
-    @param {Object} options Hash of transition options.
+    @param {Number|Object} Duration or hash of transition options.
     @param {Object} [target=this] The target for the method.
     @param {AnimateCallback|String} [method] The method to run when the transition completes.  May be a function or a property path.
     @returns {SC.View} receiver
@@ -229,13 +244,14 @@ SC.View.reopen(
       timing;
 
     //@if(debug)
-    // Provide a little developer support if they are doing something that should be considered wrong.
+    // Provide a little developer support if they are doing something that may not work.
     if (this.get('useStaticLayout')) {
       SC.warn("Developer Warning: SC.View:animate() was called on a view with useStaticLayout and may not work.  If you are using CSS to layout the view (i.e. useStaticLayout: YES), then you should manage the animation manually.");
     }
     //@endif
 
     // Normalize arguments
+    // TODO: Revisit .animate() arguments re: overloading.
     if (typeof key === SC.T_STRING) {
       hash = {};
       hash[key] = value;
@@ -247,23 +263,13 @@ SC.View.reopen(
     }
 
     optionsType = SC.typeOf(options);
-    // This support should be deprecated.  Too much argument overloading.
     if (optionsType === SC.T_NUMBER) {
-      //@if(debug)
-      // Provide a little developer support if they are doing something that should be considered wrong.
-      SC.warn("Developer Warning: The duration should be given as a property of the options object.");
-      //@endif
       options = { duration: options };
     } else if (optionsType !== SC.T_HASH) {
       throw new Error("Must provide options hash!");
     }
 
-    // This support should be deprecated.  Too much argument overloading.
     if (options.callback) {
-      //@if(debug)
-      // Provide a little developer support if they are doing something that should be considered wrong.
-      SC.warn("Developer Warning: The callback method should be given as an argument not as part of the options object.");
-      //@endif
       method = options.callback;
       delete options.callback;
     }
@@ -402,7 +408,7 @@ SC.View.reopen(
       this.set('layout', this._animateLayout);
 
       // Clear the layout cache value.
-      delete this._animateLayout;
+      this._animateLayout = null;
     }
   },
 
@@ -475,6 +481,7 @@ SC.View.reopen(
       layout = this.get('liveAdjustments');
       break;
     default:
+      layout = this._animateLayout;
     }
 
     // Immediately remove the pending animations while calling the callbacks.
@@ -510,9 +517,7 @@ SC.View.reopen(
     }
 
     // Clean up.
-    delete this._prevLayout;
-    delete this._activeAnimations;
-    delete this._pendingAnimations;
+    this._prevLayout = this._activeAnimations = this._pendingAnimations = this._animateLayout = null;
 
     return this;
   },
@@ -605,11 +610,11 @@ SC.View.reopen(
   }.property(),
 
   /** @private Removes the animation CSS from the layer style. */
-  removeAnimationFromLayout: function (propertyName, updateStyle) {
+  removeAnimationFromLayout: function (propertyName, shouldUpdateStyle) {
     var activeAnimations = this._activeAnimations,
       layer = this.get('layer');
 
-    if (!!layer && updateStyle) {
+    if (!!layer && shouldUpdateStyle) {
       var updatedCSS = [];
 
       // Calculate the transition CSS that should remain.
@@ -680,8 +685,7 @@ SC.View.reopen(
       // Clean up the internal hash.
       this._activeAnimationsLength -= 1;
       if (this._activeAnimationsLength === 0) {
-        delete this._activeAnimations;
-        delete this._prevLayout;
+        this._activeAnimations = this._prevLayout = null;
       }
     }
   },

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/layout.js

@@ -51,6 +51,9 @@ SC.View.reopen(
   */
   backgroundColor: null,
 
+  /* @private Internal variable used to check for layout changes that resize. */
+  _previousLayout: null,
+
   /**
     Activates use of brower's static layout. To activate, set this
     property to YES.
@@ -143,18 +146,47 @@ SC.View.reopen(
     @returns {SC.View} receiver
   */
   adjust: function (key, value) {
-    var layout = this.get('layout'), didChange = NO, cur, hash;
-
     if (key === undefined) { return this; } // nothing to do.
 
-    // handle string case
+    var layout = this.get('layout'),
+        didChange = NO,
+        animateLayout = this._animateLayout,
+        cur, hash;
+
+    // Normalize arguments.
     if (SC.typeOf(key) === SC.T_STRING) {
-      // this is copied from below
+      hash = {};
+      hash[key] = value;
+    } else {
+      hash = key;
+    }
+
+    for (key in hash) {
+      if (!hash.hasOwnProperty(key)) { continue; }
+
+      value = hash[key];
       cur = layout[key];
 
-      if (value === undefined || cur == value) return this;
+      // If a call to animate occurs in the same run loop, the animation layout
+      // would still be applied in the next run loop, potentially overriding this
+      // adjustment. So we need to fix up the animation layout.
+      if (animateLayout) {
+        if (value === null) {
+          delete animateLayout[key];
+        } else {
+          animateLayout[key] = value;
+        }
+
+        if (this._pendingAnimations[key]) {
+          // Adjusting a value that was previously about to be animated cancels the animation.
+          delete this._pendingAnimations[key];
+        }
+      }
+
+      if (value === undefined || cur == value) { continue; }
 
-      layout = SC.clone(layout);
+      // only clone the layout the first time we see a change
+      if (!didChange) layout = SC.clone(layout);
 
       if (value === null) {
         delete layout[key];
@@ -163,28 +195,6 @@ SC.View.reopen(
       }
 
       didChange = YES;
-    } else {
-      hash = key;
-
-      for (key in hash) {
-        if (!hash.hasOwnProperty(key)) { continue; }
-
-        value = hash[key];
-        cur = layout[key];
-
-        if (value === undefined || cur == value) { continue; }
-
-        // only clone the layout the first time we see a change
-        if (!didChange) layout = SC.clone(layout);
-
-        if (value === null) {
-          delete layout[key];
-        } else {
-          layout[key] = value;
-        }
-
-        didChange = YES;
-      }
     }
 
     // now set adjusted layout
@@ -1229,7 +1239,7 @@ SC.View.reopen(
   }.enhance(),
 
   /** @private Override: Notify on attached (avoids notify of frame changed). */
-  _notifyAttached: function () {
+  _notifyDidAttach: function () {
     // If we are using static layout then we don't know the frame until appended to the document.
     if (this.get('useStaticLayout')) {
       // We call viewDidResize so that it calls parentViewDidResize on all child views.

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/statechart.js

@@ -3,6 +3,19 @@ sc_require("views/view/base");
 // When in debug mode, core developers can log the view state.
 //@if (debug)
 SC.LOG_VIEW_STATES = false;
+SC.LOG_VIEW_STATES_STYLE = {
+  0x0200: 'color: #67b7db; font-style: italic;', // UNRENDERED
+  0x0300: 'color: #67b7db; font-style: italic;', // UNATTACHED
+  0x0301: 'color: #67b7db; font-style: italic;', // UNATTACHED_BY_PARENT
+  0x03C0: 'color: #23abf5; font-style: italic;', // ATTACHED_SHOWN
+  0x03A0: 'color: #67b7db; font-style: italic;', // ATTACHED_HIDDEN
+  0x03A1: 'color: #67b7db; font-style: italic;', // ATTACHED_HIDDEN_BY_PARENT
+  0x03C1: 'color: #b800db; font-style: italic;', // ATTACHED_BUILDING_IN
+  0x0381: 'color: #b800db; font-style: italic;', // ATTACHED_BUILDING_OUT
+  0x0382: 'color: #b800db; font-style: italic;', // ATTACHED_BUILDING_OUT_BY_PARENT
+  0x03C2: 'color: #b800db; font-style: italic;', // ATTACHED_SHOWING
+  0x03A2: 'color: #b800db; font-style: italic;' // ATTACHED_HIDING
+};
 //@endif
 
 
@@ -167,10 +180,46 @@ SC.CoreView.mixin(
 SC.CoreView.reopen(
   /** @scope SC.CoreView.prototype */ {
 
+  //@if(debug)
+  /* BEGIN DEBUG ONLY PROPERTIES AND METHODS */
+
+  /** @private Creates string representation of view, with view state. */
+  toString: function () {
+    return "%@ (%@)".fmt(sc_super(), this._viewStateString());
+  },
+
+  /** @private Creates string representation of view state.  */
+  _viewStateString: function () {
+    var ret = [], state = this.get('viewState');
+
+    for (var prop in SC.CoreView) {
+      if (prop.match(/[A-Z_]$/) && SC.CoreView[prop] === state) {
+        ret.push(prop);
+      }
+    }
+
+    return ret.join(" ");
+  },
+
+  /* END DEBUG ONLY PROPERTIES AND METHODS */
+  //@endif
+
   // ------------------------------------------------------------------------
   // Properties
   //
 
+  /* @private Internal variable used to store the number of children building out while we wait to be detached. */
+  _buildingOutCount: null,
+
+  /* @private Internal variable used to track the original view being detached that we are delaying so that we can build out. */
+  _owningView: null,
+
+  /* @private Internal variable used to store the original layout before running an automatic transition. */
+  _preTransitionLayout: null,
+
+  /* @private Internal variable used to store the original frame before running an automatic transition. */
+  _preTransitionFrame: null,
+
   /**
     The current state of the view as managed by its internal statechart.
 
@@ -255,11 +304,11 @@ SC.CoreView.reopen(
       state !== SC.CoreView.ATTACHED_HIDDEN_BY_PARENT;
   }.property('viewState').cacheable(),
 
+
   // ------------------------------------------------------------------------
   // Actions (Locked down to the proper state)
   //
 
-
   /** @private Adopt this view action. */
   _doAdopt: function (parentView, beforeView) {
     var curParentView = this.get('parentView'),
@@ -267,7 +316,7 @@ SC.CoreView.reopen(
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doAdopt(%@, %@)'.fmt(this, this.get('viewState'), parentView, beforeView));
+      SC.Logger.log('%c%@ — _doAdopt(%@, %@)'.fmt(this, parentView, beforeView), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
@@ -290,7 +339,7 @@ SC.CoreView.reopen(
         parentViewState = parentView.get('viewState'),
         parentNode, nextNode, nextView, siblings;
 
-      // Send notifications.
+      // Notify *will* (top-down from parent to children).
       if (parentView.willAddChild) { parentView.willAddChild(this, beforeView); }
       if (this.willAddToParent) { this.willAddToParent(parentView, beforeView); }
 
@@ -347,9 +396,9 @@ SC.CoreView.reopen(
         }
       }
 
-      // Notify.
-      if (parentView.didAddChild) { parentView.didAddChild(this, beforeView); }
+      // Notify *did* (bottom-up from children to parent).
       if (this.didAddToParent) { this.didAddToParent(parentView, beforeView); }
+      if (parentView.didAddChild) { parentView.didAddChild(this, beforeView); }
     } else {
       handled = false;
     }
@@ -361,50 +410,64 @@ SC.CoreView.reopen(
   _doAttach: function (parentNode, nextNode) {
     var state = this.get('viewState'),
       transitionIn = this.get('transitionIn'),
-      parentView;
+      parentView,
+      isHandled = false;
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doAttach(%@, %@)'.fmt(this, state, parentNode, nextNode));
+      SC.Logger.log('%c%@ — _doAttach(%@, %@)'.fmt(this, parentNode, nextNode), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
     switch (state) {
-    case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
-    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
-    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
-    case SC.CoreView.ATTACHED_SHOWN: // FAST PATH!
-      //@if(debug)
-      // This should be avoided, because moving the view layer without explicitly removing it first is a dangerous practice.
-      SC.warn("Developer Warning: You can not attach the view, %@, to a new node without properly detaching it first.".fmt(this));
-      //@endif
-      return false;
-    case SC.CoreView.UNATTACHED_BY_PARENT:
-      //@if(debug)
-      SC.warn("Developer Warning: You can not attach the child view, %@, directly.".fmt(this));
-      //@endif
-      return false;
-    case SC.CoreView.UNRENDERED: // FAST PATH!
-      return false;
+
+    // Normal case: view is not attached and is being attached.
+    case SC.CoreView.UNATTACHED:
+      var node = this.get('layer');
+
+      this._executeQueuedUpdates();
+
+      // Attach to parentNode
+      // IE doesn't support insertBefore(blah, undefined) in version IE9.
+      parentNode.insertBefore(node, nextNode || null);
+
+      parentView = this.get('parentView');
+      if (!parentView || (parentView && parentView.get('isAttached'))) {
+        // Update states after *will* and before *did* notifications!
+        this._routeOnAttached();
+
+        // Give child views a chance to notify and update state.
+        this._callOnChildViews('_parentDidAppendToDocument');
+
+        // Notify *did* (bottom-up from children to parent).
+        this._notifyDidAttach();
+      } else {
+        // Update states after *will* and before *did* notifications!
+        this._gotoUnattachedByParentState();
+      }
+
+      isHandled = true;
+      break;
+
+    // Special case: view switched from building out to building in.
     case SC.CoreView.ATTACHED_BUILDING_OUT:
       // If already building out, we need to cancel and possibly build in.
       this._callOnChildViews('_parentDidCancelBuildOut');
 
       // Remove the shared building out count if it exists.
-      delete this._buildingOutCount;
+      this._buildingOutCount = null;
 
       // Note: We can be in ATTACHED_BUILDING_OUT state without a transition out while we wait for child views.
+      // Update states after *will* and before *did* notifications!
       if (this.get('transitionOut')) {
         if (transitionIn) {
-          this._transitionIn();
+          // this.invokeNext(function () {
+            this._transitionIn();
+          // });
 
-          // Route.
           this._gotoAttachedBuildingInState();
         } else {
-          // Route first!
+          // Update state first!
           this._gotoAttachedShownState();
 
           this._cancelTransition();
@@ -415,122 +478,178 @@ SC.CoreView.reopen(
         this._gotoAttachedShownState();
       }
 
+      isHandled = true;
       break;
-    case SC.CoreView.UNATTACHED:
-      var node = this.get('layer');
-
-      this._executeQueuedUpdates();
-
-      // Attach to parentNode
-      // IE doesn't support insertBefore(blah, undefined) in version IE9.
-      parentNode.insertBefore(node, nextNode || null);
-
-      parentView = this.get('parentView');
-      if (!parentView || (parentView && parentView.get('isAttached'))) {
-        // Notify.
-        this._notifyAttached();
 
-        // Route.
-        this._routeOnAttached();
+    // Invalid states that have no effect.
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_HIDDEN:
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.UNRENDERED:
+      break;
 
-        // Give child views a chance to notify and update state.
-        this._callOnChildViews('_parentDidAppendToDocument');
-      } else {
-        // Route.
-        this._gotoUnattachedByParentState();
-      }
+    // Improper states that have no effect, but should be discouraged.
+    case SC.CoreView.ATTACHED_SHOWN:
+      //@if(debug)
+      // This should be avoided, because moving the view layer without explicitly removing it first is a dangerous practice.
+      SC.warn("Developer Warning: You can not attach the view, %@, to a new node without properly detaching it first.".fmt(this));
+      //@endif
+      break;
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+      //@if(debug)
+      SC.warn("Developer Warning: You can not attach the child view, %@, directly.".fmt(this));
+      //@endif
       break;
-    default:
     }
 
-    return true;
+    return isHandled;
   },
 
   /** @private Destroy the layer of this view action. */
   _doDestroyLayer: function () {
-    var handled = true;
+    var state = this.get('viewState'),
+      isHandled = false;
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doDestroyLayer()'.fmt(this, this.get('viewState')));
+      SC.Logger.log('%c%@ — _doDestroyLayer()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
-    if (this.get('_isRendered') && !this.get('isAttached')) {
+    switch (state) {
+
+    // Invalid states that have no effect.
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_HIDDEN:
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_SHOWN:
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+      break;
+
+    // Normal case (SC.CoreView.UNATTACHED): view is rendered and its layer is being destroyed.
+    default:
+      // Notify *will* (top-down from parent to children).
+      this._notifyWillDestroyLayer();
+      this._callOnChildViews('_notifyWillDestroyLayer');
+
       // Remove our reference to the layer (our self and all our child views).
       this._executeDoDestroyLayer();
       this._callOnChildViews('_executeDoDestroyLayer');
-    } else {
-      handled = false;
+
+      // UNUSED.
+      // Notify *did* (bottom-up from children to parent).
+      // this._callOnChildViews('_notifyDidDestroyLayer');
+      // this._notifyDidDestroyLayer();
+
+      isHandled = true;
     }
 
-    return handled;
+    return isHandled;
   },
 
   /** @private Detach this view action. */
   _doDetach: function (immediately) {
     var state = this.get('viewState'),
-      transitionOut = this.get('transitionOut');
+      transitionOut = this.get('transitionOut'),
+      inPlace = false,
+      isHandled = true;
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doDetach()'.fmt(this, state));
+      SC.Logger.log('%c%@ — _doDetach()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
     switch (state) {
-    case SC.CoreView.UNRENDERED: // FAST PATH!
-    case SC.CoreView.UNATTACHED: // FAST PATH!
-      return false;
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
-      if (immediately) {
-        // Don't wait for the build out to complete.
-        this._cancelTransition();
 
-        // Detach immediately.
-        this._executeDoDetach();
-      } else {
-        // TODO: take ownership of the building out of self and all childviews.  Super edge case stuff here..
-        this._gotoAttachedBuildingOutState();
-      }
-
-      // Don't try to notify or run transition out code again.
-      return true;
-    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
-      // If already building out, only cancel if immediately is set.
-      if (immediately) {
-        this._cancelTransition();
-
-        // Detach immediately.
-        this._executeDoDetach();
-      }
+    // Normal case: Attached visible view being detached.
+    case SC.CoreView.ATTACHED_SHOWN:
+      break;
 
-      // Don't try to notify or run transition out code again.
-      return true;
+    // Normal case: Attached non-visible view being detached.
     case SC.CoreView.UNATTACHED_BY_PARENT:
     case SC.CoreView.ATTACHED_HIDDEN:
     case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
       // No need to transition out, since we're hidden.
       immediately = true;
       break;
+
+    // Near normal case: Attached showing view. We cancel the incoming animation
+    // rather than swapping to a build out (difficult to get right, because we lose track of the correct final layout).
+    case SC.CoreView.ATTACHED_SHOWING:
+      this.cancelAnimation(); // Fires didTransitionIn callback (state changes to ATTACHED_SHOWN/notifications sent).
+      break;
+
+    // Near normal case: Attached hiding view. We cancel the outgoing animation
+    // rather than swapping to a build out (difficult to get right, because we lose track of the correct final layout).
     case SC.CoreView.ATTACHED_HIDING:
-      if (immediately || !transitionOut) {
-        this._cancelTransition();
-      }
+      this.cancelAnimation(); // Fires didTransitionOut callback (state changes to ATTACHED_HIDDEN/notifications sent).
+
+      // No need to transition out, since we're hidden.
+      immediately = true;
       break;
+
+    // Near normal case: Attached building in view. We cancel the incoming
+    // animation and build out the view in place.
     case SC.CoreView.ATTACHED_BUILDING_IN:
       if (immediately || !transitionOut) {
-        this._cancelTransition();
+        this.cancelAnimation(); // Fires didTransitionIn callback (state changes to ATTACHED_SHOWN/notifications sent).
+      } else {
+        // Set the state manually so the callback doesn't do clean up and notify.
+        this._gotoAttachedShownState();
+
+        // Cancel the animation in place (setup properties still exist and will be cleared by transitionOut)
+        this.cancelAnimation(SC.LayoutState.CURRENT); // Fires didTransitionIn callback (no state change/no notifications).
+
+        // Transition out in place.
+        inPlace = true;
       }
       break;
-    case SC.CoreView.ATTACHED_SHOWING:
-    case SC.CoreView.ATTACHED_SHOWN:
+
+    // Special case: Already building out, because parent is building out. Stop
+    // the transition in place so that it can continue in place on its own.
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
+      // Note: *will* detach notice already sent.
+      this.cancelAnimation(SC.LayoutState.CURRENT); // Fires didTransitionOut callback (necessary to clean up parent view build out wait)
+
+      // Switch state to regular state (the view should only have been able to get to ATTACHED_BUILDING_OUT_BY_PARENT from ATTACHED_SHOWN).
+      this._gotoAttachedShownState();
+
+      // TODO: Grab the build out count for all child views of this view. What a nightmare for an edge case!
+
+      // Transition out in place.
+      inPlace = true;
+
       break;
-    default:
+
+    // Special case: Already building out. Fast path!
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+      // If immediately is passed, cancel the build out prematurely.
+      if (immediately) {
+        // Note: *will* detach notice already sent.
+        this.cancelAnimation(); // Fires didTransitionOut callback (state changes to UNATTACHED/notifications sent).
+      }
+
+      // Don't try to notify or run transition out code again.
+      return true;
+
+    // Invalid states that have no effect. Fast path!
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+      return false;
     }
 
-    // Notify.
-    this._notifyDetaching();
+    // Notify *will* (top-down from parent to children). The children will be
+    // notified only when they are actually about to be removed.
+    // this._notifyWillDetach();
 
     if (immediately) {
       // Detach immediately.
@@ -545,22 +664,24 @@ SC.CoreView.reopen(
       this._callOnChildViews('_parentWillBuildOutFromDocument', this);
 
       if (transitionOut) {
-        this._transitionOut(this);
+        // this.invokeNext(function () {
+          this._transitionOut(inPlace, this);
+        // });
 
-        // Route.
+        // Update states after *will* and before *did* notifications!
         this._gotoAttachedBuildingOutState();
       } else if (this._buildingOutCount > 0) {
-      // Some children are building out, we will have to wait for them.
+        // Some children are building out, we will have to wait for them.
         this._gotoAttachedBuildingOutState();
       } else {
-        delete this._buildingOutCount;
+        this._buildingOutCount = null;
 
         // Detach immediately.
         this._executeDoDetach();
       }
     }
 
-    return true;
+    return isHandled;
   },
 
   /** @private Hide this view action. */
@@ -570,7 +691,7 @@ SC.CoreView.reopen(
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doHide()'.fmt(this, state));
+      SC.Logger.log('%c%@ — _doHide()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
@@ -591,6 +712,7 @@ SC.CoreView.reopen(
       // Note that visibility update is NOT conditional for this state.
       this._doUpdateVisibleStyle();
 
+      // Update states after *will* and before *did* notifications!
       this._gotoAttachedHiddenState();
 
       return true;
@@ -605,14 +727,17 @@ SC.CoreView.reopen(
     default:
     }
 
-    // Notify will hide.
+    // Notify *will* (top-down from parent to children).
     if (this.willHideInDocument) { this.willHideInDocument(); }
 
     if (transitionHide) {
-      this._transitionHide();
-
-      // Route.
+      // Update states after *will* and before *did* notifications!
       this._gotoAttachedHidingState();
+
+      // this.invokeNext(function () {
+        this._transitionHide();
+      // });
+
     } else {
       // Clear out any child views that are still transitioning before we hide.
       this._callOnChildViews('_parentWillHideInDocument');
@@ -620,13 +745,12 @@ SC.CoreView.reopen(
       // Note that visibility update is NOT conditional for this state.
       this.invokeOnce(this._doUpdateVisibleStyle);
 
-      // Notify.
-      if (this.didHideInDocument) { this.didHideInDocument(); }
-
+      // Update states after *will* and before *did* notifications!
+      this._gotoAttachedHiddenState();
       this._callOnChildViews('_parentDidHideInDocument');
 
-      // Route.
-      this._gotoAttachedHiddenState();
+      // Notify *did* (bottom-up from children to parent).
+      if (this.didHideInDocument) { this.didHideInDocument(); }
     }
 
     return true;
@@ -639,7 +763,7 @@ SC.CoreView.reopen(
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doOrphan()'.fmt(this, this.get('viewState')));
+      SC.Logger.log('%c%@ — _doOrphan()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
@@ -668,7 +792,7 @@ SC.CoreView.reopen(
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doRender()'.fmt(this, state));
+      SC.Logger.log('%c%@ — _doRender()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
@@ -691,12 +815,12 @@ SC.CoreView.reopen(
       this.renderToContext(context);
       this.set('layer', context.element());
 
-      // Route first.
+      // Update states after *will* and before *did* notifications!
       this._gotoUnattachedState();
 
-      // Notify rendered (on self and all child views).
-      this._rendered();
+      // Notify *did* (bottom-up from children to parent).
       this._callOnChildViews('_parentDidRender');
+      this._rendered();
 
       // Bypass the unattached state for adopted views.
       var parentView = this.get('parentView');
@@ -726,65 +850,74 @@ SC.CoreView.reopen(
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doShow()'.fmt(this, state));
+      SC.Logger.log('%c%@ — _doShow()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
     switch (state) {
-    case SC.CoreView.ATTACHED_SHOWN: // FAST PATH!
-    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
-    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
-      return false;
-    case SC.CoreView.UNRENDERED: // FAST PATH!
-    case SC.CoreView.UNATTACHED: // FAST PATH!
-    case SC.CoreView.UNATTACHED_BY_PARENT: // FAST PATH!
-      // Queue the visibility update for the next time we display.
-      this._visibleStyleNeedsUpdate = true;
-      return true;
+
+    // Normal case: view is hidden and is being shown.
     case SC.CoreView.ATTACHED_HIDDEN:
       if (isParentShown) {
         // Update before showing (note that visibility update is NOT conditional for this state).
         this._doUpdateVisibleStyle();
 
-        // Notify will show.
+        // Notify *will* (top-down from parent to children).
         this._callOnChildViews('_parentWillShowInDocument');
-
         if (this.willShowInDocument) { this.willShowInDocument(); }
       } else {
         // Queue the visibility update for the next time we display.
         this._visibleStyleNeedsUpdate = true;
 
-        // Route.
+        // Update states after *will* and before *did* notifications!
         this._gotoAttachedHiddenByParentState();
 
         return true;
       }
       break;
+
     case SC.CoreView.ATTACHED_HIDING:
       if (!transitionShow) {
         this._cancelTransition();
       }
       break;
+
+    // Special case: Layer exists but is not attached. Queue an update to the visibility style.
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+      // Queue the visibility update for the next time we display.
+      this._visibleStyleNeedsUpdate = true;
+      return true;
+
+    // Invalid states that have no effect.
+    case SC.CoreView.UNRENDERED: // FAST PATH!
+    case SC.CoreView.ATTACHED_SHOWN: // FAST PATH!
+    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
+      return false;
+
     default:
     }
 
     this._executeQueuedUpdates();
 
     if (transitionShow) {
-      this._transitionShow();
-
-      // Route.
+      // Update states after *will* and before *did* notifications!
       this._gotoAttachedShowingState();
+
+      // this.invokeNext(function () {
+        this._transitionShow();
+      // });
     } else {
-      // Notify.
+      // Update states after *will* and before *did* notifications!
+      this._gotoAttachedShownState();
+
+      // Notify *did* (bottom-up from children to parent).
       if (this.didShowInDocument) { this.didShowInDocument(); }
       this._callOnChildViews('_parentDidShowInDocument');
-
-    // Route.
-      this._gotoAttachedShownState();
     }
 
     return true;
@@ -797,7 +930,7 @@ SC.CoreView.reopen(
 
     //@if (debug)
     if (SC.LOG_VIEW_STATES) {
-      SC.Logger.log('%@:%@ — _doUpdateContent(%@)'.fmt(this, this.get('viewState'), force));
+      SC.Logger.log('%c%@ — _doUpdateContent(%@)'.fmt(this, force), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
@@ -831,19 +964,24 @@ SC.CoreView.reopen(
   didTransitionIn: function () {
     var state = this.get('viewState');
 
+    //@if (debug)
+    if (SC.LOG_VIEW_STATES) {
+      SC.Logger.log('%c%@ — didTransitionIn()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
+    }
+    //@endif
+
     if (state === SC.CoreView.ATTACHED_SHOWING ||
       state === SC.CoreView.ATTACHED_BUILDING_IN) {
       this._teardownTransition();
 
-      // Notify.
-      if (this.didShowInDocument) { this.didShowInDocument(); }
+      // Update states after *will* and before *did* notifications!
+      this._gotoAttachedShownState();
 
+      // Notify *did* (bottom-up from children to parent).
+      if (this.didShowInDocument) { this.didShowInDocument(); }
       if (state === SC.CoreView.ATTACHED_SHOWING) {
         this._callOnChildViews('_parentDidShowInDocument');
       }
-
-      // Route.
-      this._gotoAttachedShownState();
     }
   },
 
@@ -858,6 +996,12 @@ SC.CoreView.reopen(
   didTransitionOut: function () {
     var state = this.get('viewState');
 
+    //@if (debug)
+    if (SC.LOG_VIEW_STATES) {
+      SC.Logger.log('%c%@ — didTransitionOut()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
+    }
+    //@endif
+
     if (state === SC.CoreView.ATTACHED_BUILDING_OUT) {
       this._teardownTransition();
 
@@ -872,30 +1016,29 @@ SC.CoreView.reopen(
         owningView._executeDoDetach();
 
         // Clean up.
-        delete this._owningView;
+        this._owningView = null;
       }
     } else if (state === SC.CoreView.ATTACHED_HIDING) {
       this._teardownTransition();
 
-      // Clear out any child views that are transitioning before we hide.
+      // Notify *will* (top-down from parent to children).
       this._callOnChildViews('_parentWillHideInDocument');
 
       // Note that visibility update is NOT conditional for this state.
       this._doUpdateVisibleStyle();
 
-      // Notify.
-      if (this.didHideInDocument) { this.didHideInDocument(); }
+      // Update states after *will* and before *did* notifications!
+      this._gotoAttachedHiddenState();
 
+      // Notify *did* (bottom-up from children to parent).
       this._callOnChildViews('_parentDidHideInDocument');
-
-      // Route.
-      this._gotoAttachedHiddenState();
+      if (this.didHideInDocument) { this.didHideInDocument(); }
     }
   },
 
   /** @private The 'adopted' event. */
   _adopted: function () {
-    // This has been moved to the _notifyAttached event.
+    // This has been moved to the _notifyDidAttach event.
     // this.notifyPropertyChange('frame');
   },
 
@@ -909,8 +1052,7 @@ SC.CoreView.reopen(
   /** @private The 'rendered' event. */
   _rendered: function () {
     var displayProperties,
-      len, idx,
-      mixins = this.didCreateLayerMixin;
+      len, idx;
 
     // Register display property observers.
     displayProperties = this.get('displayProperties');
@@ -918,18 +1060,13 @@ SC.CoreView.reopen(
       this.addObserver(displayProperties[idx], this, this.displayDidChange);
     }
 
+    // Begin observing isVisible & isFirstResponder.
+    this.addObserver('isVisible', this, this._isVisibleDidChange);
+    this.addObserver('isFirstResponder', this, this._isFirstResponderDidChange);
+
     // TODO: we should be able to fix this with states
     // if (this.get('useStaticLayout')) this.viewDidResize();
 
-    // Send notice that the layer was created.
-    if (this.didCreateLayer) { this.didCreateLayer(); }
-    if (mixins) {
-      len = mixins.length;
-      for (idx = 0; idx < len; ++idx) {
-        mixins[idx].call(this);
-      }
-    }
-
     // var childView, childViews = this.get('childViews');
     // for (var i = childViews.length - 1; i >= 0; i--) {
     //   childView = childViews[i];
@@ -956,9 +1093,8 @@ SC.CoreView.reopen(
     //   childView._rendered();
     // }
 
-    // Begin observing isVisible & isFirstResponder.
-    this.addObserver('isVisible', this, this._isVisibleDidChange);
-    this.addObserver('isFirstResponder', this, this._isFirstResponderDidChange);
+    // Notify.
+    this._notifyDidRender();
   },
 
   // ------------------------------------------------------------------------
@@ -1039,7 +1175,7 @@ SC.CoreView.reopen(
   _cancelTransition: function () {
     // Cancel conflicting transitions.
     this.cancelAnimation();
-    this._teardownTransition();
+    // this._teardownTransition();
   },
 
   /** @private */
@@ -1053,22 +1189,10 @@ SC.CoreView.reopen(
     this._visibleStyleNeedsUpdate = false;
   },
 
-  /** @private */
+  /** @private Destroys the layer and updates the state. */
   _executeDoDestroyLayer: function () {
     var displayProperties,
-      idx, len,
-      mixins;
-
-    // Notify.
-    if (this.willDestroyLayer) { this.willDestroyLayer(); }
-
-    mixins = this.willDestroyLayerMixin;
-    if (mixins) {
-      len = mixins.length;
-      for (idx = 0; idx < len; ++idx) {
-        mixins[idx].call(this);
-      }
-    }
+      idx, len;
 
     // Remove the layer reference.
     this.set('layer', null);
@@ -1083,27 +1207,23 @@ SC.CoreView.reopen(
     this.removeObserver('isVisible', this, this._isVisibleDidChange);
     this.removeObserver('isFirstResponder', this, this._isFirstResponderDidChange);
 
-    // Route.
+    // Update states after *will* and before *did* notifications!
     this._gotoUnrenderedState();
   },
 
-  /** @private Detach the view. */
+  /** @private Detaches the view and updates the state. */
   _executeDoDetach: function () {
-    // Give child views a chance to clean up any transitions and to notify.
+    // Notify *will* (top-down from parent to children).
+    this._notifyWillDetach();
     this._callOnChildViews('_parentWillRemoveFromDocument');
 
     // Detach the layer.
     var node = this.get('layer');
     node.parentNode.removeChild(node);
 
-    // Notify.
-    this._notifyDetached();
-
-    // Give child views a chance to clean up any transitions and to notify.
-    this._callOnChildViews('_parentDidRemoveFromDocument');
-
-    // Route.
+    // Update states after *will* and before *did* notifications!
     this._gotoUnattachedState();
+    this._callOnChildViews('_parentDidRemoveFromDocument');
   },
 
   /** @private */
@@ -1189,8 +1309,22 @@ SC.CoreView.reopen(
     this.$().toggleClass('focus', isFirstResponder);
   },
 
+  _notifyDidRender: function () {
+    var mixins = this.didCreateLayerMixin,
+      idx, len;
+
+    // Send notice that the layer was created.
+    if (this.didCreateLayer) { this.didCreateLayer(); }
+    if (mixins) {
+      len = mixins.length;
+      for (idx = 0; idx < len; ++idx) {
+        mixins[idx].call(this);
+      }
+    }
+  },
+
   /** @private Notify on attached. */
-  _notifyAttached: function () {
+  _notifyDidAttach: function () {
     // If we don't have the layout module then we don't know the frame until appended to the document.
     this.notifyPropertyChange('frame');
 
@@ -1199,12 +1333,24 @@ SC.CoreView.reopen(
   },
 
   /** @private Notify on detaching. */
-  _notifyDetaching: function () {
+  _notifyWillDetach: function () {
     if (this.willRemoveFromDocument) { this.willRemoveFromDocument(); }
   },
 
-  /** @private Notify on detached. */
-  _notifyDetached: function () {
+  /** @private Notify before destroying layer. */
+  _notifyWillDestroyLayer: function () {
+    var idx, len,
+      mixins;
+
+    mixins = this.willDestroyLayerMixin;
+    if (mixins) {
+      len = mixins.length;
+      for (idx = 0; idx < len; ++idx) {
+        mixins[idx].call(this);
+      }
+    }
+
+    if (this.willDestroyLayer) { this.willDestroyLayer(); }
   },
 
   /** @private Routes according to parent did append. */
@@ -1212,8 +1358,11 @@ SC.CoreView.reopen(
     // Run any queued updates.
     this._executeQueuedUpdates();
 
-    this._notifyAttached();
+    // Update states after *will* and before *did* notifications!
     this._routeOnAttached();
+
+    // Notify.
+    this._notifyDidAttach();
   },
 
   /** @private Updates according to parent did cancel build out. */
@@ -1223,14 +1372,16 @@ SC.CoreView.reopen(
 
     if (state === SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT) {
       if (transitionIn) {
-        this._transitionIn();
+        // this.invokeNext(function () {
+          this._transitionIn();
+        // });
 
-        // Route.
+        // Update states after *will* and before *did* notifications!
         this._gotoAttachedBuildingInState();
       } else {
         this._cancelTransition();
 
-        // Route.
+        // Update states after *will* and before *did* notifications!
         this._gotoAttachedShownState();
       }
     } else if (state === SC.CoreView.ATTACHED_BUILDING_OUT || state &
@@ -1242,10 +1393,9 @@ SC.CoreView.reopen(
 
   /** @private Updates according to parent did render. */
   _parentDidRender: function () {
-    // Route first.
+    // Update states after *will* and before *did* notifications!
     this._gotoUnattachedByParentState();
 
-    // Notify rendered.
     this._rendered();
   },
 
@@ -1261,25 +1411,28 @@ SC.CoreView.reopen(
     case SC.CoreView.ATTACHED_BUILDING_OUT:
     case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
       // There's no need to continue to further child views.
-      return false;
+      // return false;
     case SC.CoreView.ATTACHED_HIDDEN:
     case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
     case SC.CoreView.ATTACHED_HIDING:
-      // Notify.
-      this._notifyDetaching();
+      // Notify *will* (top-down from parent to children).
+      // this._notifyWillDetach();
 
       return false;
     case SC.CoreView.ATTACHED_SHOWING:
     case SC.CoreView.ATTACHED_BUILDING_IN:
     case SC.CoreView.ATTACHED_SHOWN:
-      // Notify.
-      this._notifyDetaching();
+      // Notify *will* (top-down from parent to children).
+      // this._notifyWillDetach();
 
       if (transitionOut) {
         this._owningView = owningView;
-        this._transitionOut(owningView);
 
-        // Route.
+        // this.invokeNext(function () {
+          this._transitionOut(false, owningView);
+        // });
+
+        // Update states after *will* and before *did* notifications!
         this._gotoAttachedBuildingOutByParentState();
       }
       return true;
@@ -1297,12 +1450,19 @@ SC.CoreView.reopen(
     case SC.CoreView.UNATTACHED_BY_PARENT:
       // There's no need to continue to further child views.
       return false;
-    case SC.CoreView.ATTACHED_BUILDING_IN:
+    // Cancel any outstanding isVisible transitions and mark for visibility update.
     case SC.CoreView.ATTACHED_SHOWING:
     case SC.CoreView.ATTACHED_HIDING:
+      this._cancelTransition();
+      this._teardownTransition();
+      this._visibleStyleNeedsUpdate = true;
+      break;
+    // Cancel any other outstanding transitions.
+    case SC.CoreView.ATTACHED_BUILDING_IN:
     case SC.CoreView.ATTACHED_BUILDING_OUT:
     case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
       this._cancelTransition();
+      this._teardownTransition();
       break;
     case SC.CoreView.ATTACHED_HIDDEN:
     case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
@@ -1311,6 +1471,9 @@ SC.CoreView.reopen(
     default:
       // Attached and not in a transitionary state.
     }
+
+    // Notify *will*.
+    this._notifyWillDetach();
   },
 
   /** @private Routes according to parent did detach. */
@@ -1318,7 +1481,7 @@ SC.CoreView.reopen(
     var state = this.get('viewState');
 
     if (state & SC.CoreView.IS_ATTACHED) {
-      this._notifyDetached();
+      // Update states after *will* and before *did* notifications!
       this._gotoUnattachedByParentState();
     } else {
       // There's no need to continue to further child views.
@@ -1348,11 +1511,11 @@ SC.CoreView.reopen(
     default:
     }
 
-    // Notify.
-    if (this.didHideInDocument) { this.didHideInDocument(); }
-
-    // Route.
+    // Update states after *will* and before *did* notifications!
     this._gotoAttachedHiddenByParentState();
+
+    // Notify *did* (bottom-up from children to parent).
+    if (this.didHideInDocument) { this.didHideInDocument(); }
   },
 
   /** @private Routes according to parent will hide. */
@@ -1369,15 +1532,17 @@ SC.CoreView.reopen(
       return false;
     case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
       // Clear out any child views that are transitioning before we hide.
-      this._callOnChildViews('_parentWillHideInDocument');
+      // Notify *will* (top-down from parent to children).
+      // this._callOnChildViews('_parentWillHideInDocument');
+
+      // // Update states after *will* and before *did* notifications!
+      // this._gotoAttachedHiddenState();
 
+      // Cancel our hiding transition.
       this._cancelTransition();
 
       // We didn't quite hide in time so indicate that visibility needs update next time we display.
-      this._visibleStyleNeedsUpdate = true;
-
-      // Route.
-      this._gotoAttachedHiddenState();
+      // this._visibleStyleNeedsUpdate = true;
 
       return false;
     case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
@@ -1394,7 +1559,7 @@ SC.CoreView.reopen(
       // Attached and not in a transitionary state.
     }
 
-    // Notify.
+    // Notify *will* (top-down from parent to children).
     if (this.willHideInDocument) { this.willHideInDocument(); }
   },
 
@@ -1403,10 +1568,10 @@ SC.CoreView.reopen(
     var state = this.get('viewState');
 
     if (state === SC.CoreView.ATTACHED_HIDDEN_BY_PARENT) {
-      // Route.
+      // Update states after *will* and before *did* notifications!
       this._gotoAttachedShownState();
 
-      // Notify.
+      // Notify *did* (bottom-up from children to parent).
       if (this.didShowInDocument) { this.didShowInDocument(); }
     } else {
       // There's no need to continue to further child views.
@@ -1421,7 +1586,7 @@ SC.CoreView.reopen(
     if (state === SC.CoreView.ATTACHED_HIDDEN_BY_PARENT) {
       this._executeQueuedUpdates();
 
-      // Notify.
+      // Notify *will* (top-dow`n from parent to children).
       if (this.willShowInDocument) { this.willShowInDocument(); }
     } else {
       // There's no need to continue to further child views.
@@ -1442,8 +1607,8 @@ SC.CoreView.reopen(
     this.set('layout', this._preTransitionLayout);
 
     // Clean up.
-    delete this._preTransitionLayout;
-    delete this._preTransitionFrame;
+    this._preTransitionLayout = null;
+    this._preTransitionFrame = null;
   },
 
   /** @private Attempts to run a transition hide, ensuring any incoming transitions are stopped in place. */
@@ -1499,20 +1664,11 @@ SC.CoreView.reopen(
   },
 
   /** @private Attempts to run a transition out, ensuring any incoming transitions are stopped in place. */
-  _transitionOut: function (owningView) {
-    var state = this.get('viewState'),
-      transitionOut = this.get('transitionOut'),
-      options = this.get('transitionOutOptions') || {},
-      inPlace = false;
+  _transitionOut: function (inPlace, owningView) {
+    var transitionOut = this.get('transitionOut'),
+      options = this.get('transitionOutOptions') || {};
 
-    switch (state) {
-    case SC.CoreView.ATTACHED_SHOWING:
-    case SC.CoreView.ATTACHED_HIDING:
-    case SC.CoreView.ATTACHED_BUILDING_IN:
-      this.cancelAnimation(SC.LayoutState.CURRENT);
-      inPlace = true;
-      break;
-    default:
+    if (!inPlace) {
       this._setupTransition();
     }
 
@@ -1557,13 +1713,15 @@ SC.CoreView.reopen(
       // Views without a parent are not limited by a parent's current state.
       isParentShown = parentView ? parentView.get('viewState') & SC.CoreView.IS_SHOWN : true;
 
-    // Route.
+    // Update states after *will* and before *did* notifications!
     if (this.get('isVisible')) {
       if (isParentShown) {
         // Route.
         var transitionIn = this.get('transitionIn');
         if (transitionIn) {
-          this._transitionIn();
+          // this.invokeNext(function () {
+            this._transitionIn();
+          // });
 
           this._gotoAttachedBuildingInState();
         } else {