This module defines the base dojo/_base/fx implementation.
See the dojo/_base/fx reference documentation for more information.
anim
(node,properties,duration,easing,onEnd,delay)
Defined by dojo/_base/fx
A simpler interface to animateProperty()
, also returns an instance of Animation
but begins the animation immediately, unlike nearly every other Dojo animation API.
Simpler (but somewhat less powerful) version of animateProperty
. It uses defaults for many basic properties and allows for positional parameters to be used in place of the packed "property bag" which is used for other Dojo animation methods.
The Animation
object returned will be already playing, so calling play() on it again is (usually) a no-op.
Parameter | Type | Description |
---|---|---|
node | DOMNode | String |
a DOM node or the id of a node to animate CSS properties on |
properties | Object | |
duration | Integer | Optional
The number of milliseconds over which the animation should run. Defaults to the global animation default duration (350ms). |
easing | Function | Optional
An easing function over which to calculate acceleration and deceleration of the animation through its duration. A default easing algorithm is provided, but you may plug in any you wish. A large selection of easing algorithms are available in |
onEnd | Function | Optional
A function to be called when the animation finishes running. |
delay | Integer | Optional
The number of milliseconds to delay beginning the animation by. The default is 0. |
Returns: undefined
Fade out a node
basefx.anim("id", { opacity: 0 });
Fade out a node over a full second
basefx.anim("id", { opacity: 0 }, 1000);
animateProperty
(args)
Defined by dojo/_base/fx
Returns an animation that will transition the properties of node defined in args
depending how they are defined in args.properties
Foundation of most dojo/_base/fx animations. It takes an object of "properties" corresponding to style properties, and animates them in parallel over a set duration.
Parameter | Type | Description |
---|---|---|
args | Object |
An object with the following properties:
|
Returns: instance
A simple animation that changes the width of the specified node.
basefx.animateProperty({
node: "nodeId",
properties: { width: 400 },
}).play();
Dojo figures out the start value for the width and converts the
integer specified for the width to the more expressive but verbose form { width: { end: '400', units: 'px' } }
which you can also specify directly. Defaults to 'px' if omitted.
Animate width, height, and padding over 2 seconds... the pedantic way:
basefx.animateProperty({ node: node, duration:2000,
properties: {
width: { start: '200', end: '400', units:"px" },
height: { start:'200', end: '400', units:"px" },
paddingTop: { start:'5', end:'50', units:"px" }
}
}).play();
Note 'paddingTop' is used over 'padding-top'. Multi-name CSS properties
are written using "mixed case", as the hyphen is illegal as an object key.
Plug in a different easing function and register a callback for when the animation ends. Easing functions accept values between zero and one and return a value on that basis. In this case, an exponential-in curve.
basefx.animateProperty({
node: "nodeId",
// dojo figures out the start value
properties: { width: { end: 400 } },
easing: function(n){
return (n==0) ? 0 : Math.pow(2, 10 * (n - 1));
},
onEnd: function(node){
// called when the animation finishes. The animation
// target is passed to this function
}
}).play(500); // delay playing half a second
Like all Animation
s, animateProperty returns a handle to the Animation instance, which fires the events common to Dojo FX. Use aspect.after
to access these events outside of the Animation definition:
var anim = basefx.animateProperty({
node:"someId",
properties:{
width:400, height:500
}
});
aspect.after(anim, "onEnd", function(){
console.log("animation ended");
}, true);
// play the animation now:
anim.play();
Each property can be a function whose return value is substituted along. Additionally, each measurement (eg: start, end) can be a function. The node reference is passed directly to callbacks.
basefx.animateProperty({
node:"mine",
properties:{
height:function(node){
// shrink this node by 50%
return domGeom.position(node).h / 2
},
width:{
start:function(node){ return 100; },
end:function(node){ return 200; }
}
}
}).play();
Animation
(args)
Defined by dojo/_base/fx
A generic animation class that fires callbacks into its handlers object at various states.
A generic animation class that fires callbacks into its handlers object at various states. Nearly all dojo animation functions return an instance of this method, usually without calling the .play() method beforehand. Therefore, you will likely need to call .play() on instances of Animation
when one is returned.
Parameter | Type | Description |
---|---|---|
args | Object |
The 'magic argument', mixing all the properties into this animation instance. |
fadeIn
(args)
Defined by dojo/_base/fx
Returns an animation that will fade node defined in 'args' from its current opacity to fully opaque.
Parameter | Type | Description |
---|---|---|
args | Object |
An object with the following properties:
|
Returns: undefined
fadeOut
(args)
Defined by dojo/_base/fx
Returns an animation that will fade node defined in 'args' from its current opacity to fully transparent.
Parameter | Type | Description |
---|---|---|
args | Object |
An object with the following properties:
|
Returns: undefined
© 2005–2017 JS Foundation
Licensed under the AFL 2.1 and BSD 3-Clause licenses.
http://dojotoolkit.org/api/1.10/dojo/_base/fx.html