dojo/fx::wipeOut()

Authors:Peter Higgins, Nikolai Onken, Marcus Reimann, Jared Jurkiewicz Developers:Bryan Forbes, Peter Higgins, Eugene Lazutkin, Bill Keese, Adam Peller, Alex Russell, Dylan Schiemann, sjmiles since:V1.0

Contents

• dojo/fx::wipeOut()
  • Usage
  • Examples
  • See Also

This function is a helper function that wraps the dojo/_base/fx::animateProperty() function to provide an easy interface to wiping a node out of view on the page. While this can be done with the animateProperty() function, this function is simpler to use and will handle 99% of the cases a wipe-out is desired.

NOTE: The wipe end wipes from the full height of the target DOMNode to a height of 0px.

Usage

Basic usage requires just the node to be wiped-out to be passed:

require(["dojo/fx"], function(coreFx){
  coreFx.wipeOut({
    node: "someNode"
  }).play();
});

require(["dojo/fx"], function(coreFx){ coreFx.wipeOut({ node: "someNode" }).play(); });

The function configuration hash can take the other properties of dojo/_base/fx::animateProperty() <dojo/_base/fx#animateproperty>.

The wipeOut() function returns an instance of dojo/_base/fx::Animation. To start the wipe-out, call the play() function on the Animation. This object can be used with other Dojo animation functions, such as dojo/fx::chain() and dojo/fx::combine() to link it with other effects to perform complex animations.

Examples

This example does a simple wipe-out of a DOMNode.

require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
function(coreFx, dom, style, on){
  on(dom.byId("basicWipeButton"), "click", function(){
    style.set("basicWipeNode", {
      height: "",
      display: "block"
    })
    coreFx.wipeOut({
      node: "basicWipeNode"
    }).play();
  });
});

require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"], function(coreFx, dom, style, on){ on(dom.byId("basicWipeButton"), "click", function(){ style.set("basicWipeNode", { height: "", display: "block" }) coreFx.wipeOut({ node: "basicWipeNode" }).play(); }); });

<button type="button" id="basicWipeButton">Wipe It Out!</button>
<div id="basicWipeNode" style="width: 200px; background-color: red;">
  <b>This is a container of random content to wipe out!</b>
</div>

<button type="button" id="basicWipeButton">Wipe It Out!</button> <div id="basicWipeNode" style="width: 200px; background-color: red;"> <b>This is a container of random content to wipe out!</b> </div>

This example adds a custom duration to the wipe-out animation

require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
function(coreFx, dom, style, on){
  on(dom.byId("basicWipeButton1"), "click", function(){
    style.set("basicWipeNode1", {
      height: "",
      display: "block"
    });
    coreFx.wipeOut({
      node: "basicWipeNode1",
      duration: 5000
    }).play();
  });
});

require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"], function(coreFx, dom, style, on){ on(dom.byId("basicWipeButton1"), "click", function(){ style.set("basicWipeNode1", { height: "", display: "block" }); coreFx.wipeOut({ node: "basicWipeNode1", duration: 5000 }).play(); }); });

<button type="button" id="basicWipeButton1">Wipe It Out!</button>
<div id="basicWipeNode1" style="width: 200px; background-color: red;">
  <b>This is a container of random content to wipe out slowly!</b>
</div>

<button type="button" id="basicWipeButton1">Wipe It Out!</button> <div id="basicWipeNode1" style="width: 200px; background-color: red;"> <b>This is a container of random content to wipe out slowly!</b> </div>

Wipe-out a node with an easing function.

require(["dojo/fx", "dojo/fx/easing", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
function(coreFx, easing, dom, style, on){
  on(dom.byId("basicWipeButton2"), "click", function(){
    style.set("basicWipeNode2", {
      height: "",
      display: "block"
    });
    coreFx.wipeOut({
      node: "basicWipeNode2",
      duration: 5000,
      easing: easing.expoOut
    }).play();
  });
});

require(["dojo/fx", "dojo/fx/easing", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"], function(coreFx, easing, dom, style, on){ on(dom.byId("basicWipeButton2"), "click", function(){ style.set("basicWipeNode2", { height: "", display: "block" }); coreFx.wipeOut({ node: "basicWipeNode2", duration: 5000, easing: easing.expoOut }).play(); }); });

<button type="button" id="basicWipeButton2">Wipe It Out!</button>
<div id="basicWipeNode2" style="width: 200px; background-color: red;">
  <b>This is a container of random content to wipe out slowly with the expoOut easing!</b>
</div>

<button type="button" id="basicWipeButton2">Wipe It Out!</button> <div id="basicWipeNode2" style="width: 200px; background-color: red;"> <b>This is a container of random content to wipe out slowly with the expoOut easing!</b> </div>

See Also

• dojo/fx::wipeIn() - The companion to wipeOut()
• dojo/_base/fx::animateProperty() - Details around the other options possible
• Animation Tutorial - The tutorial to find out about Dojo’s FX API

Table of Contents

• dojo/fx::wipeOut()
  • Usage
  • Examples
  • See Also