Effects library on top of Base animations
See the dojo/fx reference documentation for more information.
Collection of easing functions to use beyond the default
dojo._defaultEasing function.
Chain a list of dojo/_base/fx.Animations to run in sequence
Return a dojo/_base/fx.Animation which will play all passed dojo/_base/fx.Animation instances in sequence, firing its own synthesized events simulating a single animation. (eg: onEnd of this animation means the end of the chain, not the individual animations within)
| Parameter | Type | Description |
|---|---|---|
| animations | dojo/_base/fx.Animation[] |
Once node is faded out, fade in otherNode
require(["dojo/fx"], function(fx){
fx.chain([
fx.fadeIn({ node:node }),
fx.fadeOut({ node:otherNode })
]).play();
});
Combine a list of dojo/_base/fx.Animations to run in parallel
Combine an array of dojo/_base/fx.Animations to run in parallel, providing a new dojo/_base/fx.Animation instance encompasing each animation, firing standard animation events.
| Parameter | Type | Description |
|---|---|---|
| animations | dojo/_base/fx.Animation[] |
Fade out node while fading in otherNode simultaneously
require(["dojo/fx"], function(fx){
fx.combine([
fx.fadeIn({ node:node }),
fx.fadeOut({ node:otherNode })
]).play();
});
When the longest animation ends, execute a function:
require(["dojo/fx"], function(fx){
var anim = fx.combine([
fx.fadeIn({ node: n, duration:700 }),
fx.fadeOut({ node: otherNode, duration: 300 })
]);
aspect.after(anim, "onEnd", function(){
// overall animation is done.
}, true);
anim.play(); // play the animation
});
Slide a node to a new top/left position
Returns an animation that will slide "node" defined in args Object from its current position to the position defined by (args.left, args.top).
| Parameter | Type | Description |
|---|---|---|
| args | Object | A hash-map of standard |
.slideTo({ node: node, left:"40", top:"50", units:"px" }).play()
Expand a node to it's natural height.
Returns an animation that will expand the node defined in 'args' object from it's current height to it's natural height (with no scrollbar). Node must have no margin/border/padding.
| Parameter | Type | Description |
|---|---|---|
| args | Object | A hash-map of standard |
require(["dojo/fx"], function(fx){
fx.wipeIn({
node:"someId"
}).play()
});
Shrink a node to nothing and hide it.
Returns an animation that will shrink node defined in "args" from it's current height to 1px, and then hide it.
| Parameter | Type | Description |
|---|---|---|
| args | Object | A hash-map of standard |
require(["dojo/fx"], function(fx){
fx.wipeOut({ node:"someId" }).play()
});