dojo/fx¶
Authors: | Peter Higgins, Nikolai Onken, Marcus Reimann |
---|---|
Developers: | Bryan Forbes, Peter Higgins, Eugene Lazutkin, Bill Keese, Adam Peller, Alex Russell, Dylan Schiemann, sjmiles |
since: | V1.0 |
Have you ever wanted to nicely fade out or fade in a block of text, slide or wipe a DOM node into position, or even
chain together numerous animations to provide a nice, dynamically changing page for your users? Well, that is exactly
what the dojo/fx
module and package is for. This module provides several commonly used animation effects and other
utilities to manage animations. These FX functions all build upon the basic FX support in dojo/_base/fx. There are also less commonly used FX functions available in dojox
under the dojox/fx package.
This page is a landing point for reference off to each function, its description, and examples.
NOTE: There is the Animation Tutorial, which is a better place to start then the Reference Guide.
Features¶
dojo/_base/fx¶
- animateProperty() - The most basic animation function in Dojo. It allows you to animate the change of most CSS properties, as well as perform, pre and post operations as the animation executes. Almost all the following animation functions are built using this function.
- fadeIn() - A simple function for fading a currently invisible (opacity 0), node into view.
- fadeOut() - A simple function for fading a currently visible (opacity 1), node to opacity 0.
dojo/fx¶
- wipeIn() - Wipe in a node (height 0 to max height of node).
- wipeOut() - Wipe out a node (max height to 0).
- slideTo() - To slide a node from current position to ABS position
x
,y
. - chain() - A helper function that can take two animation instances and combine them into a single animation instance where each of the input animations is run after the other in sequence.
- combine() - A helper function that can take two animation instances and combine them into a single animation instance where each of the input animations are run in parallel.
dojo/fx/easing¶
- dojo/fx/easing - A set of easing functions.
dojo/fx/Toggler¶
- dojo/fx/Toggler - A helper class to wrap to simplify assigning two animations to a node, one
for the
show
animation and one forhide
animation. For example, fading a node in for show and out for hide.