Class TKTransition

Object
   |
   +--TKTransition

class TKTransition

The TKTransition class allows to create a synchronized change of one or more property values on a TKView 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.

Field Detail

archivedStyles

Object archivedStyles

archivedValues

Object archivedValues

defaultsApplied

Object defaultsApplied

delay

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.

delegate

Object delegate

The delegate object that implements the TKTransitionDelegate protocol.

duration

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.

from

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.

properties

Array properties

The set of properties that will be transitioned. The properties are either JavaScript properties of the target TKView instance or CSS properties of the targeted HTMLElement.

removesTargetUponCompletion

bool removesTargetUponCompletion

Indicates whether the target needs to be removed once the transition completes. Defaults to false.

revertsToOriginalValues

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.

target

Object target

The transition target, either a TKView instance or an HTMLElement.

timingFunction

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.

to

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.

TKTransition

TKTransition(params)

applyDefaults

void applyDefaults()

applyFromState

void applyFromState()

applyToState

void applyToState()

archiveBaseValues

void archiveBaseValues()

archiveTransitionStyles

void archiveTransitionStyles()

getTargetStyle

Object getTargetStyle()

handleEvent

void handleEvent(event)

restoreBaseValues

void restoreBaseValues()

restoreTransitionStyles

void restoreTransitionStyles()

start

void start()

Starts the transition.