- Project owner
Peter Higgins
- since
v1.2
This module provides Animated CSS class transitions for nodes, or in other words: will animate the effects of adding, removing, or toggling a class name on a node.
These API's are identical to their plain Dojo counterparts: dojo.addClass <dojo/addClass>, dojo.removeClass <dojo/removeClass>, dojo.toggleClass <dojo/toggleClass>, though they return an instance of a dojo.Animation, and require you to call .play()
Additionally, you can pass in an animation "magic arg", defining additional properties for the animation (such as duration: easing: rate: ... ). This is passed as the third parameter to removeClass and addClass:
The only variation here is toggleClass, whose third parameter can be used to force adding or removing (just as dojo.toggleClass <dojo/toggleClass> does). In this case, you need to pass undefined value in third position, and the animation arg object in the fourth:
The returns of these functions can be applied to a dojo.fx.combine <dojo/fx/combine> or chain <dojo/fx/chain> call.
An ext-dojo module exists for these functions as well. They can be included into dojo.NodeList <dojo/NodeList> by requiring the appropriate module:
This allows you to use these functions automatically with dojo.query <dojo/query>, though to not conflict with dojo.query's own .addClass, .removeClass, and .toggleClass, these functions are suffixed with "Fx": .addClassFx, .removeClassFx, and .toggleClassFx respectively.
The node is assumed, and omitted from the parameters. An Animation "magic arg" can be mixed in after the classname in these functions as well.