dojo/fx.js

• Provides:

  • dojo.fx

• dojo.fx

  • type

    Object

  • summary

    Effects library on top of Base animations

• _baseObj

  • type

    Object

  • summary

• dojo.fx.chain

  • type

    Function

  • parameters:
    • animations: (typeof dojo.Animation[])
  • source: [view]
      return new _chain(animations) // dojo.Animation
  • summary

    Chain a list of `dojo.Animation`s to run in sequence

  • description

    Return a `dojo.Animation` which will play all passed
    `dojo.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)

  • returns

    dojo.Animation

  • example

    Once `node` is faded out, fade in `otherNode`
    
    	dojo.fx.chain([
    		dojo.fadeIn({ node:node }),
    		dojo.fadeOut({ node:otherNode })
    	]).play();

• dojo.fx.combine

  • type

    Function

  • parameters:
    • animations: (typeof dojo.Animation[])
  • source: [view]
      return new _combine(animations); // dojo.Animation
  • summary

    Combine a list of `dojo.Animation`s to run in parallel

  • description

    Combine an array of `dojo.Animation`s to run in parallel,
    providing a new `dojo.Animation` instance encompasing each
    animation, firing standard animation events.

  • returns

    dojo.Animation

  • example

    Fade out `node` while fading in `otherNode` simultaneously
    
    	dojo.fx.combine([
    		dojo.fadeIn({ node:node }),
    		dojo.fadeOut({ node:otherNode })
    	]).play();

  • example

    When the longest animation ends, execute a function:
    
    	var anim = dojo.fx.combine([
    		dojo.fadeIn({ node: n, duration:700 }),
    		dojo.fadeOut({ node: otherNode, duration: 300 })
    	]);
    	dojo.connect(anim, "onEnd", function(){
    		// overall animation is done.
    	});
    	anim.play(); // play the animation

• dojo.fx.wipeIn

  • type

    Function

  • parameters:
    • args: (typeof Object)

      A hash-map of standard `dojo.Animation` constructor properties
      (such as easing: node: duration: and so on)

  • source: [view]
      var node = args.node = d.byId(args.node), s = node.style, o;
    
    
      var anim = d.animateProperty(d.mixin({
       properties: {
        height: {
         // wrapped in functions so we wait till the last second to query (in case value has changed)
         start: function(){
          // start at current [computed] height, but use 1px rather than 0
          // because 0 causes IE to display the whole panel
          o = s.overflow;
          s.overflow = "hidden";
          if(s.visibility == "hidden" || s.display == "none"){
           s.height = "1px";
           s.display = "";
           s.visibility = "";
           return 1;
          }else{
           var height = d.style(node, "height");
           return Math.max(height, 1);
          }
         },
         end: function(){
          return node.scrollHeight;
         }
        }
       }
      }, args));
    
    
      d.connect(anim, "onEnd", function(){
       s.height = "auto";
       s.overflow = o;
      });
    
    
      return anim; // dojo.Animation
  • summary

    Expand a node to it's natural height.

  • description

    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.

  • returns

    dojo.Animation

  • example

    
    	dojo.fx.wipeIn({
    		node:"someId"
    	}).play()

• dojo.fx.wipeOut

  • type

    Function

  • parameters:
    • args: (typeof Object)

      A hash-map of standard `dojo.Animation` constructor properties
      (such as easing: node: duration: and so on)

  • source: [view]
      var node = args.node = d.byId(args.node), s = node.style, o;
    
      
      var anim = d.animateProperty(d.mixin({
       properties: {
        height: {
         end: 1 // 0 causes IE to display the whole panel
        }
       }
      }, args));
    
    
      d.connect(anim, "beforeBegin", function(){
       o = s.overflow;
       s.overflow = "hidden";
       s.display = "";
      });
      d.connect(anim, "onEnd", function(){
       s.overflow = o;
       s.height = "auto";
       s.display = "none";
      });
    
    
      return anim; // dojo.Animation
  • summary

    Shrink a node to nothing and hide it.

  • description

    Returns an animation that will shrink node defined in "args"
    from it's current height to 1px, and then hide it.

  • returns

    dojo.Animation

  • example

    
    	dojo.fx.wipeOut({ node:"someId" }).play()

• dojo.fx.slideTo

  • type

    Function

  • parameters:
    • args: (typeof Object)

      A hash-map of standard `dojo.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.

  • source: [view]
      var node = args.node = d.byId(args.node),
       top = null, left = null;
    
    
      var init = (function(n){
       return function(){
        var cs = d.getComputedStyle(n);
        var pos = cs.position;
        top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0);
        left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0);
        if(pos != 'absolute' && pos != 'relative'){
         var ret = d.position(n, true);
         top = ret.y;
         left = ret.x;
         n.style.position="absolute";
         n.style.top=top+"px";
         n.style.left=left+"px";
        }
       };
      })(node);
      init();
    
    
      var anim = d.animateProperty(d.mixin({
       properties: {
        top: args.top || 0,
        left: args.left || 0
       }
      }, args));
      d.connect(anim, "beforeBegin", anim, init);
    
    
      return anim; // dojo.Animation
  • summary

    Slide a node to a new top/left position

  • description

    Returns an animation that will slide "node"
    defined in args Object from its current position to
    the position defined by (args.left, args.top).

  • returns

    dojo.Animation

  • example

    
    	dojo.fx.slideTo({ node: node, left:"40", top:"50", units:"px" }).play()

• _baseObj._fire

  • type

    Function

  • parameters:
    • evt: (typeof )
    • args: (typeof )
  • source: [view]
        if(this[evt]){
         this[evt].apply(this, args||[]);
        }
        return this;
  • summary

• dojo

  • type

    Object

  • summary