W3cubDocs

/Dojo

dojo/_base/fx

Summary

This module defines the base dojo/_base/fx implementation.

See the dojo/_base/fx reference documentation for more information.

Methods

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 dojo/fx/easing.

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

Examples

Example 1

Fade out a node

basefx.anim("id", { opacity: 0 });

Example 2

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:

  • properties (Object, optional):

    A hash map of style properties to Objects describing the transition, such as the properties of _Line with an additional 'units' property

  • node (DOMNode|String):

    The node referenced in the animation

  • duration (Integer, optional):

    Duration of the animation in milliseconds.

  • easing (Function, optional):

    An easing function.

Returns: instance

Examples

Example 1

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.

Example 2

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.

Example 3

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

Example 4

Like all Animations, 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();

Example 5

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:

  • node (DOMNode|String):

    The node referenced in the animation

  • duration (Integer, optional):

    Duration of the animation in milliseconds.

  • easing (Function, optional):

    An easing function.

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:

  • node (DOMNode|String):

    The node referenced in the animation

  • duration (Integer, optional):

    Duration of the animation in milliseconds.

  • easing (Function, optional):

    An easing function.

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