Dojo in XPages 13 – DOM Element Animation Functions

In the last post, we saw how to animate DOM elements with simple actions built into XPages. In this post, we’ll look at the underlying Dojo code they generate and see how to create them without the simple actions, which allows you to add animations to be triggered by non-XPages components and lays the foundation for creating fully-customized animations.

Dojo in XPages Series

Dojo in XPages — All Blog Posts

Using Built-In Animation Methods

Dojo has a some common methods built in for easy use.

The general concept is that you call an animation method and define its parameters, then call the play() method to run it.

Fade Out

This is the code that is generated by the simple action:

function view__id1__id4_clientSide_onclick(thisEvent) {
  var _id=dojo.byId("myDiv");
  var _a1 = dojo.fadeOut({"node":_id});
  _a1.play();
}

Here’s how you can write it yourself:

dojo.fadeOut({'node':'myDiv'}).play();

This is not the recommended syntax, but it seems to work as well:

dojo.fadeOut('myDiv').play();

The initial syntax is required when you want to add more attributes to the animation. To change the duration of the animation, specify the value in milliseconds. Here are two ways you can write this:

fadeParameters = {'node':'myDiv', 'duration':1000};
dojo.fadeOut(fadeParameters).play();

dojo.fadeOut({'node':'myDiv', 'duration':1000}).play();

Fade In

Here’s the code generated by the simple action:

function view__id1__id5_clientSide_onclick(thisEvent) {
  var _id=dojo.byId("myDiv");
  var _a1 = dojo.fadeIn({"node":_id});
  _a1.play();
}

Here’s how you can write it yourself:

dojo.fadeIn({'node':'myDiv'}).play();

Interestingly, this does not seem to work, even though it works for fadeOut()

dojo.fadeIn('myDiv').play();

To change the duration of the animation, add the duration attribute.

dojo.fadeIn({'node':'myDiv', 'duration':1000}).play();

Transitions in dojo.fx

The wipe transitions do not have corresponding methods in core dojo, but they do exist in the dojo.fx module.

When you use any of the simple actions, it automatically includes the module for you. It adds this script tag in the page header:

<script type="text/javascript">dojo.require('dojo.fx')</script>

If you’re not using a simple action transition on the page, then you’ll need to include the module yoursef. If you don’t, you’ll see a ‘dojo.fx is undefined’ error in the developer tools console:

You can include the module on your page or at the application level via the theme. At the page level, go to Resources > Add > Dojo module... and enter the module name.

This puts the same script tag shown above into the page header.

Wipe Out

Here’s the code that’s generated for the Wipe Out simple action:

function view__id1__id6_clientSide_onclick(thisEvent) {
  var _id=dojo.byId("myDiv");
  var _a1 = dojo.fx.wipeOut({"node":_id});
  _a1.play();
}

Here’s how you can write it yourself:

dojo.fx.wipeOut({'node':'myDiv'}).play();

Wipe In

The Wipe In method is very similar, but it also needs a parameter for the final height of the object.

Here’s the code generated by the simple action:

function view__id1__id7_clientSide_onclick(thisEvent) {
  var _id=dojo.byId("myDiv");
  var _a1 = dojo.fx.wipeIn({"node":_id,"height":100});
  _a1.play();
}

Here’s how you can write it yourself:

dojo.fx.wipeIn({'node':'myDiv','height':100}).play()

Slide To

The Slide To function moves an element by animating the top and left position to the desired place on the page.

Here’s the code generated by the simple action:

function view__id1__id10_clientSide_onclick(thisEvent) {
  var _id=dojo.byId("myDiv");
  var _a1 = dojo.fx.slideTo({"node":_id,"top":400,"left":400});
  _a1.play();
} 

Here’s how you can write it yourself:

dojo.fx.slideTo({'node':'myDiv','top':400,'left':400}).play();

Up Next

These built-in methods make it easy to animate some elements on the page but don’t provide much opportunity for customization. In the next post, we’ll take a look at the method you can use to define custom animations on your page.