Class Index | File Index

Classes


Class TKTransition

The TKTransition class allows to create a synchronized change of one or more property values on a Element instance or any DOM element.

First, the user sets the target for the transition, identifying the target element, and second the set of properties, in the form of an Array of CSS properties for the element. Then the to and optional from value arrays are provided to define what values will be used for the transition. Each item in the from and to arrays matches the item at the same index in the properties array, and the same applies to the duration property, which can also be a single value shared for all transitioned properties.

Finally, once the properties on the transition are all set, the start method must be called so that the transition is started. Note that it is possible to group transitions within a TKTransaction and set a default set of transition properties within a transaction using the TKTransaction.defaults static property.

The following example shows how to make a transition that fades an element in as it animates from the right side of the screen:

new TKTransition({
  target : anElement,
  properties : ['opacity', '-webkit-transform'];
  from : [0, 'translate(320px, 0)'],
  to : [1, 'translate(0, 0)']
  duration : 0.5;
}).start();

Note that properties of a TKTransition object can be passed as a batch to the TKTransition constructor as an anonymous object. This also allows reuse of a set of parameters across several transitions. Also, a set of pre-baked transitions exist can be easily applied to an element with the Element.applyTransition method.


Defined in: Transition.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
TKTransition(params)
Field Summary
Field Attributes Field Name and Description
 
The set of delays in seconds, each delay matching a property in the properties array.
 
The delegate object that implements the TKTransitionDelegate protocol.
 
The set of durations in seconds, each duration matching a property in the properties array.
 
Optional list of values to start the transition from.
 
The set of properties that will be transitioned.
 
Indicates whether the target needs to be removed once the transition completes.
 
Indicates whether the target needs to reset the property that are transitioned to their original values once the transition completes.
 
The transition target.
 
The set of timing functions, each timing function matching a property in the properties array.
 
to
Required list of values to transition to.
Method Summary
Method Attributes Method Name and Description
 
Starts the transition.
Class Detail
TKTransition(params)
Parameters:
params
Since:
TuneKit 1.0
Field Detail
{Object} delay
The set of delays in seconds, each delay matching a property in the properties array. Note that it's possible to specify a single delay instead of an array to use the same delay for all properties.

{Object} delegate
The delegate object that implements the TKTransitionDelegate protocol.

{Object} duration
The set of durations in seconds, each duration matching a property in the properties array. Note that it's possible to specify a single value instead of an array to use the same duration for all properties.

{Array} from
Optional list of values to start the transition from. Each value in this array must match the property at the same index in the properties array.

{Array} properties
The set of properties that will be transitioned. The properties are CSS properties of the targeted Element.

{bool} removesTargetUponCompletion
Indicates whether the target needs to be removed once the transition completes. Defaults to false.

{bool} revertsToOriginalValues
Indicates whether the target needs to reset the property that are transitioned to their original values once the transition completes. Defaults to false.

{Element} target
The transition target.

{Object} timingFunction
The set of timing functions, each timing function matching a property in the properties array. Note that it's possible to specify a single timing function instead of an array to use the same timing function for all properties.

{Array} to
Required list of values to transition to. Each value in this array must match the property at the same index in the properties array.
Method Detail
start()
Starts the transition.

Copyright © 2009 Apple Inc. All rights reserved.