Class: SC.ContainerView

Extends SC.View.

A container view will display its "content" view as its only child. You can use a container view to easily swap out views on your page. In addition to displaying the actual view in the content property, you can also set the nowShowing property to the property path of a view in your page and the view will be found and swapped in for you.

Animated Transitions

To animate the transition between views, you can provide a transitionSwap plugin to SC.ContainerView. There are several common transitions pre-built and if you want to create your own, the SC.ViewTransitionProtocol defines the methods to implement.

The transitions included with SC.ContainerView are:

• SC.ContainerView.DISSOLVE - fades between the two views
• SC.ContainerView.FADE_COLOR - fades out to a color and then in to the new view
• SC.ContainerView.MOVE_IN - moves the new view in over top of the old view
• SC.ContainerView.PUSH - pushes the old view out with the new view
• SC.ContainerView.REVEAL - moves the old view out revealing the new view underneath

To use a transitionSwap plugin, simply set it as the value of the container view's transitionSwap property.

For example,

container = SC.ContainerView.create({
  transitionSwap: SC.ContainerView.PUSH
});

Since each transitionSwap plugin predefines a unique animation, SC.ContainerView provides the transitionSwapOptions property to allow for modifications to the animation.

For example,

container = SC.ContainerView.create({
  transitionSwap: SC.ContainerView.PUSH,
  transitionSwapOptions: {
    duration: 1.25,    // Use a longer duration then default
    direction: 'up'    // Push the old content up
  }
});

All the predefined transitionSwap plugins take options to modify the default duration and timing of the animation and to see what other options are available, refer to the documentation of the plugin.

Defined in: container.js

Since:

SproutCore 1.0

Field Summary

transitionSwapOptions: {
  direction: 'left',
  duration: 0.25,
  timing: 'linear'
}