dojox/fx/flip (version 1.10)

Summary

Experimental and extended Animations beyond Dojo Core / Base functionality. Provides advanced Lines, Animations, and convenience aliases.

See the dojox/fx/flip reference documentation for more information.

Property Summary

Method Summary

  • _Line(start,end) a custom _Line to accommodate multi-dimensional values
  • _Timeline(keys) The dojox.fx._Timeline object from which an instance is created
  • addClass(node,cssClass,args) Animate the effects of adding a class to a node
  • animateTimeline(options,node) An add-on to dojo.fx that provides the ability to create a complex property animation based on an array of "keyframes".
  • flip(args) Animate a node flipping following a specific direction
  • flipCube(args) An extension to dojox.fx.flip providing a more 3d-like rotation
  • flipGrid(args) An extension to dojox.fx.flip providing a decomposition in rows * cols flipping elements
  • flipPage(args) An extension to dojox.fx.flip providing a page flip like animation.
  • removeClass(node,cssClass,args) Animate the effects of removing a class from a node
  • smoothScroll(args) Returns an animation that will smooth-scroll to a node
  • toggleClass(node,cssClass,condition,args) Animate the effects of Toggling a class on a Node

Properties

_allowedProperties
Defined by: dojox/fx/style

Methods

_Line(start,end)
Defined by dojox/fx/_core

a custom _Line to accommodate multi-dimensional values

a normal dojo._Line is the curve, and does Line(start,end) for propertyAnimation. as we make more complicatied animations, we realize some properties can have 2, or 4 values relevant (x,y) or (t,l,r,b) for example

this function provides support for those Lines, and is ported directly from 0.4 this is a lot of extra code for something so seldom used, so we'll put it here as and optional core addition. you can create a new line, and use it during onAnimate as you see fit.

Parameter Type Description
start Integer | Array

An Integer (or an Array of integers) to use as a starting point
end Integer | Array

An Integer (or an Array of integers) to use as an ending point

Examples

Example 1

see dojox.fx.smoothScroll

Example 2

// this is 10 .. 100 and 50 .. 500
var curve = new dojox.fx._Line([10,50],[100,500]);
// dojo.Animation.onAnimate is called at every step of the animation
// to define current values. this _Line returns an array
// at each step. arguments[0] and [1] in this example.
_Timeline(keys)
Defined by dojox/fx/Timeline

The dojox.fx._Timeline object from which an instance is created

Parameter Type Description
keys Array
addClass(node,cssClass,args)
Defined by dojox/fx/style

Animate the effects of adding a class to a node

Creates an animation that will animate the properties of a node to the properties defined in a standard CSS .class definition. (calculating the differences itself)

Parameter Type Description
node String | DomNode

A String ID or DomNode referce to animate
cssClass String

The CSS class name to add to the node
args Object
Optional

Additional optional dojo.animateProperty arguments, such as duration, easing and so on.
Returns:undefined

Examples

Example 1

   .bar { line-height: 12px; }
   .foo { line-height: 40px; }
   <div class="bar" id="test">
   Multi<br>line<br>text
   </div>

   // animate to line-height:40px
   dojo.fx.addClass("test", "foo").play();
animateTimeline(options,node)
Defined by dojox/fx/Timeline

An add-on to dojo.fx that provides the ability to create a complex property animation based on an array of "keyframes".

The Timeline is a replacement for the default dojo._Line. Instead of _Line.getValue returning a float between 0-1, _Timeline.getValue returns an object with all properties and their current values. A property does not have to appear in every keyframe. As in the example below, "height" is transitioned from the first keyframe to the third. "width" is transitioned from the first to the second to the third. Each keyframe can accept the following custom properties:

  • step: String: The start, finish or percentage that this keyframe represents. Allowed parameters are:
    • 0%-100%
    • from (same as 0%, used to conform with the Webkit animation spec)
    • to (same as 100%, used to conform with the Webkit animation spec)
  • ease: String: The string name of a dojo.fx.easing ease. Defaults to "linear". Use the suffix name of the ease, like: "quadIn", not: "dojo.fx.quadIn".
Parameter Type Description
options Object

The parameters passed to the timeline animation. Includes:

  • keys: Array: An array of objects, with style properties and values.
  • duration: Duration of the animation in milliseconds. Defaults to 1000.
node DOMNode

The node to manipulate

Examples

Example 1

var keys = [
{
    step:"0px",
    ease:"quadInOut",
    width:"50px",
    height:"50px",
},{
    step:"25%",
    width:"190px"
},{
    step:"100%",
    width:"10px",
    height:"200px",
}
];
ani = dojox.fx.animateTimeline({keys:keys, duration:2000}, "myDiv").play();
flip(args)
Defined by dojox/fx/flip

Animate a node flipping following a specific direction

Returns an animation that will flip the node around a central axis:

if args.dir is "left" or "right" --> y axis

if args.dir is "top" or "bottom" --> x axis

This effect is obtained using a border distortion applied to a helper node.

The user can specify three background colors for the helper node:

  • darkColor: the darkest color reached during the animation
  • lightColor: the brightest color
  • endColor: the final backgroundColor for the node

Other arguments:

  • depth: Float

    • 0 <= depth <= 1 overrides the computed "depth"
      • (0: min distortion, 1: max distortion)

  • whichAnim: String

    • "first" : the first half animation
    • "last" : the second one
    • "both" (default) : both

  • axis: String

    • "center" (default) : the node is flipped around his center
    • "shortside" : the node is flipped around his "short" (in perspective) side
    • "longside" : the node is flipped around his "long" (in perspective) side
    • "cube" : the node flips around the central axis of the cube

  • shift: Integer: node translation, perpendicular to the rotation axis

Parameter Type Description
args Object

Examples

Example 1

var anim = dojox.fx.flip({
    node: dojo.byId("nodeId"),
    dir: "top",
    darkColor: "#555555",
    lightColor: "#dddddd",
    endColor: "#666666",
    depth: .5,
    shift: 50,
    duration:300
  });
flipCube(args)
Defined by dojox/fx/flip

An extension to dojox.fx.flip providing a more 3d-like rotation

An extension to dojox.fx.flip providing a more 3d-like rotation. Behaves the same as dojox.fx.flip, using the same attributes and other standard dojo.Animation properties.

Parameter Type Description
args Object

Examples

Example 1

See dojox.fx.flip

flipGrid(args)
Defined by dojox/fx/flip

An extension to dojox.fx.flip providing a decomposition in rows * cols flipping elements

An extension to dojox.fx.flip providing a page flip effect. Behaves the same as dojox.fx.flip, using the same attributes and other standard dojo.Animation properties and

  • cols: Integer columns
  • rows: Integer rows
  • duration: the single flip duration
Parameter Type Description
args Object

Examples

Example 1

See dojox.fx.flip

flipPage(args)
Defined by dojox/fx/flip

An extension to dojox.fx.flip providing a page flip like animation.

An extension to dojox.fx.flip providing a page flip effect. Behaves the same as dojox.fx.flip, using the same attributes and other standard dojo.Animation properties.

Parameter Type Description
args Object

Examples

Example 1

See dojox.fx.flip

removeClass(node,cssClass,args)
Defined by dojox/fx/style

Animate the effects of removing a class from a node

Creates an animation that will animate the properties of a node (args.node) to the properties calculated after removing a standard CSS className from a that node.

calls dojo.removeClass(args.cssClass) onEnd of animation

standard dojo.Animation object rules apply.

Parameter Type Description
node undefined
cssClass undefined
args undefined
Returns:undefined

Examples

Example 1

// animate the removal of "foo" from a node with id="bar"
dojox.fx.removeClass("bar", "foo").play()
smoothScroll(args)
Defined by dojox/fx/scroll

Returns an animation that will smooth-scroll to a node

This implementation support either horizontal or vertical scroll, as well as both. In addition, element in iframe can be scrolled to correctly.

Parameter Type Description
args Object
  • offset: {x: int, y: int} this will be added to the target position
  • duration: Duration of the animation in milliseconds.
  • win: a node or window object to scroll
toggleClass(node,cssClass,condition,args)
Defined by dojox/fx/style

Animate the effects of Toggling a class on a Node

creates an animation that will animate the effect of toggling a class on or off of a node. Adds a class to node if not present, or removes if present. Pass a boolean condition if you want to explicitly add or remove.

Parameter Type Description
node String | DomNode

The domNode (or string of the id) to toggle
cssClass String

String of the classname to add to the node
condition Boolean
Optional

If passed, true means to add the class, false means to remove.
args Object
Optional

Additional dojo.Animation args to pass along.
Returns:undefined

Examples

Example 1

// add the class "sampleClass" to a node id="theNode"
dojox.fx.toggleClass("theNode","sampleClass",true).play();

Example 2

// toggle the class "sampleClass" on the node id="theNode"
dojox.fx.toggleClass("theNode","sampleClass").play();
Error in the documentation? Can’t find what you are looking for? Let us know!