Applying Transition Animations

In mobile applications, it is common to have nice transition effects between screens or dialogs.  Profound UI makes it easy for you to add such effects to your application through the pui.animate() API.  The API can animate any CSS property and also has several prebuilt effects, such as fade in, fade out, fly in right, fly out left, etc.  The API can be used on a specific element or the entire screen.  For mobile applications that use the Mobile Device Layout widget, it is common to apply the animation to the layout itself.  To accomplish this, you must first give the layout an id, such as “MyMobileLayout”.  Then, you can apply the animation as follows:

You can call pui.animate() in the onload event to play the transition animation when a screen first appears.  Similarly, you can specify the onsubmit event to play the transition animation right before a screen is submitted and the next screen is presented.  Alternatively, if you only want to play the animation for certain types of actions only, you can attach the animation to the onclick event of a specific button or element.