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.
Constructor Attributes | Constructor Name and Description |
---|---|
TKTransition (params)
|
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. |
|
Required list of values to transition to.
|
Method Attributes | Method Name and Description |
---|---|
start ()
Starts the transition.
|
properties
array.
Note that it's possible to specify a single delay instead of an array to use the same delay for
all properties.
TKTransitionDelegate
protocol.
properties
array.
Note that it's possible to specify a single value instead of an array to use the same duration for
all properties.
properties
array.
Element
.
false
.
false
.
Element
}
target
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.
properties
array.