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