This function animates an element or a container using a CSS3 transition.

Parameters:

  • config object - JavaScript object containing configuration properties for this animation

Configuration Options:

  • element - the id or reference to an element or container object to animate
  • effect - a specific animation effect to use; if this config option is used, the config options "property", "from", and "to" are automatically set and do not need to be specified; the following effect values are valid:
    • fade in
    • fade out
    • fly in left
    • fly out left
    • fly in right
    • fly out right
    • fly in down
    • fly out down
    • fly in up
    • fly out up
  • property or properties - the CSS property to animate, such as color, left, top, or background-color; can also be specified as an array of properties
  • duration - optional value specifying how long the animation will last; can be specified in seconds (example: "1s") or milliseconds (example: "750ms"); if not specified, the default duration of 500ms or 0.5s is used
  • type - optional animation type; valid values include linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier(n,n,n,n); if not specified, the default animation type is "ease"
  • from - optional beginning property value for the animation; can be specified as an array if dealing with multiple properties; if not specified, the current property value is used as the beginning value
  • to - destination property value for the animation; can be specified as an array if dealing with multiple properties

Example:

The following can be used on the onload event to create a screen transition animation from left to right:

pui.animate({  element: "MyMobileLayout",  property: "left",  from: "-300px",  to: "0px" });

Alternatively, the following simpler syntax can also be used:

pui.animate({  element: "MyMobileLayout",  effect: "fly in right" });