Dojo in XPages 12 – Animating DOM Elements with Simple Actions
One of the great features of Dojo is that it provides the ability to animate DOM elements. The easiest way to make use of that functionality in an XPages application is the built-in simple actions. In this post, we’ll look at the actions that are available and how to use them.
Dojo in XPages Series
Animation Simple Actions
The easiest way to use common Dojo animations is to use the simple actions that are part of the Extension Library (and included with Notes 8.5.3 Upgrade Pack 1 and built into Notes 9).
To find them, select a component to which you can add an event handler. On the Events view, click the
Client tab, ensure that
Simple Actions is selected and click
Change the Category drop-down to
Dojo Effects and you’ll see a list of options.
- Dojo Animation – Animates one or more attributes
- Dojo Fade In Effect – Fades in a hidden element
- Dojo Fade Out Effect – Fades out an element
- Dojo Slide To Effect – Slides an element to a specific position
- Dojo Wipe In Effect – Fades in a hidden element with a wipe in effect
- Dojo Wipe Out Effect – Fades out an element with a wipe effect
All you have to do to use the fade and wipe actions is define the target node. You can choose an XPages component or define a hard-coded or computed client-side element ID.
For a page with a div that has an id of “mydiv”, these simple actions will fade the div out and back in:
The fade effects steadily change the opacity of the element from 1 to 0 and vice versa.
duration specifies how long the animation will take to complete (in milliseconds). The default is 350 milliseconds. The
Similarly to the Fade animations, you can define the target node and the Wipe actions will work.
However, because this animates the height, be careful of using this with
div tags. Once you wipe a div out, its height attribute is changed to
auto, rather than its originally-defined. When you try to execute the Wipe In effect, there’s no height defined for the div, so it doesn’t display anything (aside from a small line during the animation, which goes away)! This appears to be the case both when the div is styled inline or with a class, using CSS. (The same issue does not seem to apply for other elements.)
The SlideTo animation moves an element on the page to a specific position, as defined by the
You can change the
duration to speed it up or slow it down. You can also define an
easing function to modify whether it speeds up or slows down.
Aside from the built-in effects mentioned above, you can use the Dojo Animation action to animate other properties.
In addition to specifying the target element, you also define one or more properties to animate and the end state of each property. (It will start with the element’s current attributes if you don’t define start parameters.)
Here’s an example that will change the div color from red to blue and change its height from 100px to 200px:
NOTE: As mentioned in other recent posts, Dojo attribute names are very similar to CSS attribute names, but they do not allow hyphens. The
background-color css attribute is defined as
backgroundColor for this animation.
You can set the
repeat property to perform the animation mutiple times, although it appears that you have to define the starting values if you do that. And the element ends up in its original state, rather than in the defined end state.
You can also set the frame
rate and animation
duration. You can also set a
delay before the animation begins.
In the next post, we’ll look at the dojo.fx module and see how to generate these animations with client-side code. This will allow you to further customize the animations and also to attach them to non-XPages elements.