W3cubDocs

/Dojo

dojo/main.fx

Summary

Effects library on top of Base animations

Properties

easing

Defined by: dojo/fx/easing

Collection of easing functions to use beyond the default dojo._defaultEasing function.

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

© 2005–2017 JS Foundation
Licensed under the AFL 2.1 and BSD 3-Clause licenses.
http://dojotoolkit.org/api/1.10/dojo/main.fx.html