App.Transitions Class
Y.App extension that provides view transitions in browsers which support
native CSS3 transitions.
View transitions provide an nice way to move from one "page" to the next that is both pleasant to the user and helps to communicate a hierarchy between sections of an application.
When the "app-transitions" module is used, it will automatically mix itself
into Y.App and transition between activeView changes using the following
effects:
-
fade: Cross-fades between the old an new active views. -
slideLeft: The old and new active views are positioned next to each other and both slide to the left. -
slideRight: The old and new active views are positioned next to each other and both slide to the right.
Note: Transitions are an opt-in feature and are enabled via an app's
transitions attribute.
Index
Properties
Attributes
Methods
_dequeueActiveView
()
protected
<p>Dequeues any pending calls to <code>_uiTransitionActiveView()</code>.</p> <p><strong>Note:</strong> When there is more than one queued transition, only the most recent <code>activeView</code> change will be visually transitioned, while the others will have their <code>transition</code> option overridden to <code>false</code>.</p>
_getFx
-
newView -
oldView -
[transition]
<p>Returns an object containing a named fx for both <code>viewIn</code> and <code>viewOut</code> based on the relationship between the specified <code>newView</code> and <code>oldView</code>.</p>
Parameters:
Returns:
<p>An object containing a named fx for both <code>viewIn</code> and <code>viewOut</code>.</p>
_queueActiveView
()
protected
<p>Queues calls to <code>_uiTransitionActiveView()</code> to make sure a currently running transition isn't interrupted.</p> <p><strong>Note:</strong> This method prevents the default <code>_uiSetActiveView()</code> method from running.</p>
_setTransitions
-
transitions
Setter for transitions attribute.
When specified as true, the defaults will be use as specified by the
transitions prototype property.
Parameters:
-
transitionsBoolean | ObjectThe new
transitionsattribute value.
Returns:
The processed value which represents the new state.
_uiTransitionActiveView
-
newView -
[oldView] -
[options]
<p>Performs the actual change of this app's <code>activeView</code> by visually transitioning between the <code>newView</code> and <code>oldView</code> using any specified <code>options</code>.</p> <p>The <code>newView</code> is attached to the app by rendering it to the <code>viewContainer</code>, and making this app a bubble target of its events.</p> <p>The <code>oldView</code> is detached from the app by removing it from the <code>viewContainer</code>, and removing this app as a bubble target for its events. The <code>oldView</code> will either be preserved or properly destroyed.</p> <p><strong>Note:</strong> This method overrides <code>_uiSetActiveView()</code> and provides all of its functionality plus supports visual transitions. Also, the <code>activeView</code> attribute is read-only and can be changed by calling the <code>showView()</code> method.</p>
Parameters:
-
newViewView<p>The View which is now this app's <code>activeView</code>.</p>
-
[oldView]View optional<p>The View which was this app's <code>activeView</code>.</p>
-
[options]Object optional<p>Optional object containing any of the following properties:</p>
-
[callback]Function optional<p>Optional callback function to call after new <code>activeView</code> is ready to use, the function will be passed:</p>
-
viewViewA reference to the newactiveView.
-
-
[prepend=false]Boolean optional<p>Whether the <code>view</code> should be prepended instead of appended to the <code>viewContainer</code>.</p>
-
[render]Boolean optional<p>Whether the <code>view</code> should be rendered. <strong>Note:</strong> If no value is specified, a view instance will only be rendered if it's newly created by this method.</p>
-
[transition]Boolean | String optional<p>Optional transition override. A transition can be specified which will override the default, or <code>false</code> for no transition.</p>
-
[update=false]Boolean optional<p>Whether an existing view should have its attributes updated by passing the <code>config</code> object to its <code>setAttrs()</code> method. <strong>Note:</strong> This option does not have an effect if the <code>view</code> instance is created as a result of calling this method.</p>
-
showView
-
view -
[config] -
[options] -
[callback]
Sets which view is active/visible for the application. This will set the
app's activeView attribute to the specified view.
The view will be "attached" to this app, meaning it will be both rendered
into this app's viewContainer node and all of its events will bubble to
the app. The previous activeView will be "detached" from this app.
When a string-name is provided for a view which has been registered on this
app's views object, the referenced metadata will be used and the
activeView will be set to either a preserved view instance, or a new
instance of the registered view will be created using the specified config
object passed-into this method.
A callback function can be specified as either the third or fourth argument,
and this function will be called after the new view becomes the
activeView, is rendered to the viewContainer, and is ready to use.
Parameters:
-
viewString | ViewThe name of a view defined in the
viewsobject, or a view instance which should become this app'sactiveView. -
[config]Object optionalOptional configuration to use when creating a new view instance. This config object can also be used to update an existing or preserved view's attributes when
options.updateistrue. -
[options]Object optionalOptional object containing any of the following properties:
-
[callback]Function optionalOptional callback function to call after new
activeViewis ready to use, the function will be passed:-
viewViewA reference to the newactiveView.
-
-
[prepend=false]Boolean optionalWhether the
viewshould be prepended instead of appended to theviewContainer. -
[render]Boolean optionalWhether the
viewshould be rendered. Note: If no value is specified, a view instance will only be rendered if it's newly created by this method. -
[transition]Boolean | String optionalOptional transition override. A transition can be specified which will override the default, or
falsefor no transition. -
[update=false]Boolean optionalWhether an existing view should have its attributes updated by passing the
configobject to itssetAttrs()method. Note: This option does not have an effect if theviewinstance is created as a result of calling this method.
-
-
[callback]Function optionalOptional callback Function to call after the new
activeViewis ready to use. Note: this will overrideoptions.callbackand it can be specified as either the third or fourth argument. The function will be passed the following:-
viewViewA reference to the new
activeView.
-
Example:
var app = new Y.App({
views: {
usersView: {
// Imagine that Y.UsersView has been defined.
type: Y.UsersView
}
},
transitions: true,
users : new Y.ModelList()
});
app.route('/users/', function () {
this.showView('usersView', {users: this.get('users')});
});
app.render();
app.navigate('/uses/');
// => Creates a new Y.UsersView and transitions to it.Properties
_transitioning
Boolean
protected
<p>Whether this app is currently transitioning its <code>activeView</code>.</p>
Default: false
_viewTransitionQueue
Array
protected
<p>A queue that holds pending calls to this app's <code>_uiTransitionActiveView()</code> method.</p>
Default: []
FX
Object
static
Collect of transitions -> fx.
A transition (e.g. "fade") is a simple name given to a configuration of fx to
apply, consisting of viewIn and viewOut properties who's values are names of
fx registered on Y.Transition.fx.
By default transitions: fade, slideLeft, and slideRight have fx defined.
transitions
Object
Default transitions to use when the activeView changes.
The following are types of changes for which transitions can be defined that
correspond to the relationship between the new and previous activeView:
-
navigate: The default transition to use when changing theactiveViewof the application. -
toChild: The transition to use when the newactiveViewis configured as a child of the previously active view via itsparentproperty as defined in this app'sviews. -
toParent: The transition to use when the newactiveViewis configured as theparentof the previously active view as defined in this app'sviews.
Note: Transitions are an opt-in feature and will only be used in browsers which support native CSS3 transitions.
Default: { navigate: 'fade', toChild : 'slideLeft', toParent: 'slideRight' }
Attributes
transitions
Boolean | Object
Whether or not this application should use view transitions, and if so then
which ones or true for the defaults which are specified by the
transitions prototype property.
Note: Transitions are an opt-in feature and will only be used in browsers which support native CSS3 transitions.
Default: false