dojo/_base/kernel.fx

Summary

Effects library on top of Base animations

Properties

easing

Defined by: dojo/fx/easing

Methods

chain(animations)

Defined by dojo/fx

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[]

Returns: instance

Examples

Example 1

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(animations)

Defined by dojo/fx

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[]

Returns: instance

Examples

Example 1

Fade out node while fading in otherNode simultaneously

require(["dojo/fx"], function(fx){
    fx.combine([
        fx.fadeIn({ node:node }),
        fx.fadeOut({ node:otherNode })
    ]).play();
});

Example 2

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
});

slideTo(args)

Defined by dojo/fx

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 dojo/_base/fx.Animation constructor properties (such as easing: node: duration: and so on). Special args members are top and left, which indicate the new position to slide to.

Returns: undefined

Examples

Example 1

.slideTo({ node: node, left:"40", top:"50", units:"px" }).play()

Toggler()

Defined by dojo/fx/Toggler

wipeIn(args)

Defined by dojo/fx

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 dojo/_base/fx.Animation constructor properties (such as easing: node: duration: and so on)

Returns: undefined

Examples

Example 1

require(["dojo/fx"], function(fx){
    fx.wipeIn({
        node:"someId"
    }).play()
});

wipeOut(args)

Defined by dojo/fx

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 dojo/_base/fx.Animation constructor properties (such as easing: node: duration: and so on)

Returns: undefined

Examples

Example 1

require(["dojo/fx"], function(fx){
    fx.wipeOut({ node:"someId" }).play()
});