Namespace: ModuleAnimations

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 1.2
Module:
  • ojmoduleanimations

QuickNav

Fields

Methods

Type Definitions

Description

A collection of ModuleAnimation implementations that can be specified on the "animation" option of ojModule binding.

These implementations assume that either the ojModule binding is on a real HTML element or, for ojModule binding on virtual element, each view is contained by a single HTML root element.

Laying Out ojModule Views

Guidelines on laying out ojModule views to achieve smoother animation:
  • The ojModule binding should be placed on a container div that has a dimension independent of its children. During view switch, new view is inserted and old view is removed. The container div acts as a placeholder to ensure other elements around the views such as header and navigation controls do not move.
  • All views that will be loaded by the ojModule binding should have the same size. For example by setting their height to 100%. This will make sure the views fill up the space in the container div. Some animation effects such as sliding to cover or reveal look best when the old view and the new view have the same size.
  • All views should have a background color. This will make sure the old view does not show through the new view, unless it is the intent of the application to have a glass pane effect during the animation.
  • Avoid applying css style to any view element that is dependent on the DOM hierarchy outside the view. This is because during view change the view can be temporarily attached to a different parent. Having css style that assumes certain hierarchy outside the view can make the desired style not to be applied during animation.


Usage

Typescript Import Format
//This namespace exports multiple static methods or members. To import 
import * as ModuleAnimations from "ojs/ojmoduleanimations";

//Now you can access the methods as ModuleAnimations.methodName and so on

For additional information visit:


A collection of ModuleAnimation implementations that can be specified on the "animation" option of ojModule binding.

These implementations assume that either the ojModule binding is on a real HTML element or, for ojModule binding on virtual element, each view is contained by a single HTML root element.

Laying Out ojModule Views

Guidelines on laying out ojModule views to achieve smoother animation:
  • The ojModule binding should be placed on a container div that has a dimension independent of its children. During view switch, new view is inserted and old view is removed. The container div acts as a placeholder to ensure other elements around the views such as header and navigation controls do not move.
  • All views that will be loaded by the ojModule binding should have the same size. For example by setting their height to 100%. This will make sure the views fill up the space in the container div. Some animation effects such as sliding to cover or reveal look best when the old view and the new view have the same size.
  • All views should have a background color. This will make sure the old view does not show through the new view, unless it is the intent of the application to have a glass pane effect during the animation.
  • Avoid applying css style to any view element that is dependent on the DOM hierarchy outside the view. This is because during view change the view can be temporarily attached to a different parent. Having css style that assumes certain hierarchy outside the view can make the desired style not to be applied during animation.

Fields

(static) coverStart

ModuleAnimation implementation for changing views by sliding the new view in to cover the old view.

This will take the text direction of the page into account. On "ltr" page, the new view will slide to the left. On "rtl" page, it will slide to the right.

(static) coverUp

ModuleAnimation implementation for changing views by sliding the new view up to cover the old view.

(static) fade

ModuleAnimation implementation for changing views by fading in the new view and fading out the old view.
ModuleAnimation implementation for navigating to child views by using animations that are dependent on the platform theme.

The default animations for each platform theme are as follows:

  • Web theme: coverStart
  • iOS theme: coverStart
  • Android theme: coverUp
  • Windows theme: zoomIn

The default animation can be changed with the following theme variable:
$animationNavChildDefault: specify the animation for navigating to child views.

Valid values are the names of specific animation implementations such as "coverStart".

ModuleAnimation implementation for navigating to parent views by using animations that are dependent on the platform theme.

The default animations for each platform theme are as follows:

  • Web theme: revealEnd
  • iOS theme: revealEnd
  • Android theme: revealDown
  • Windows theme: zoomOut

The default animation can be changed with the following theme variable:
$animationNavParentDefault: specify the animation for navigating to parent views.

Valid values are the names of specific animation implementations such as "revealEnd".

ModuleAnimation implementation for navigating to sibling views earlier in the reading order by using animations that are dependent on the platform theme.

The default animations for each platform theme are as follows:

  • Web theme: none
  • iOS theme: none
  • Android theme: pushEnd
  • Windows theme: pushEnd

The default animation can be changed with the following theme variable:
$animationNavSiblingEarlierDefault: specify the animation for navigating to sibling views earlier in the reading order.

Valid values are the names of specific animation implementations such as "pushEnd".

ModuleAnimation implementation for navigating to sibling views later in the reading order by using animations that are dependent on the platform theme.

The default animations for each platform theme are as follows:

  • Web theme: none
  • iOS theme: none
  • Android theme: pushStart
  • Windows theme: pushStart

The default animation can be changed with the following theme variable:
$animationNavSiblingLaterDefault: specify the animation for navigating to sibling views later in the reading order.

Valid values are the names of specific animation implementations such as "pushStart".

(static) pushEnd

ModuleAnimation implementation for changing views by having the new view push out the old view towards the end of the reading order.

(static) pushStart

ModuleAnimation implementation for changing views by having the new view push out the old view towards the start of the reading order.

(static) revealDown

ModuleAnimation implementation for changing views by sliding the old view down to reveal the new view.

(static) revealEnd

ModuleAnimation implementation for changing views by sliding the old view out to reveal the new view.

This will take the text direction of the page into account. On "ltr" page, the old view will slide to the right. On "rtl" page, it will slide to the left.

(static) zoomIn

ModuleAnimation implementation for changing views by zooming in on the new view.

(static) zoomOut

ModuleAnimation implementation for changing views by zooming out on the old view.

Methods

(static) createAnimation(oldViewEffect, newViewEffect, newViewOnTop) : {ModuleElementAnimation}

Create and return a ModuleAnimation implementation that combines base effects from AnimationUtils
Parameters:
Name Type Description
oldViewEffect {effect: AnimationUtils.AnimationMethods, [key:string]: any} | AnimationUtils.AnimationMethods | ((param0: Element) => Promise<void>) | null an animation effect for the outgoing view.

If this is null, no animation will be applied.
If this is a function, it should return a Promise that resolves when the animation ends.
If this is a string, it should be one of the effect method names in AnimationUtils.
If this is an object, it should describe the effect:
Properties
Name Type Argument Description
effect string the name of an effect method in AnimationUtils
effectOption * <optional>
 any option applicable to the specific animation effect

Replace effectOption with the actual option name. More than one option can be specified. Refer to the method description in AnimationUtils for available options.
newViewEffect {effect: AnimationUtils.AnimationMethods, [key:string]: any} | AnimationUtils.AnimationMethods | ((param0: Element) => Promise<void>) | null an animation effect for the incoming view.

This is in the same format as oldViewEffect.
newViewOnTop boolean specify true to initially create the new view on top of the old view. This is needed for certain effects such as sliding the new view in to cover the old view. Default is false.
Returns:

an implementation of the ModuleAnimation interface

Type
ModuleElementAnimation

(static) switcher(callback) : {ModuleElementAnimation}

Returns an implementation of ModuleAnimation interface that switches between different animation implementations
Parameters:
Name Type Description
callback (param0: ModuleAnimations.SwitcherCallBackParam) => ModuleAnimations.Animations a callback function whose return value should be a string containing one of the animation types supported by ModuleAnimations. The function will be passed a context object with the keys detailed below:
  • node - a DOM node where the ojModule binding is attached. This may be a virtual/comment node
  • valueAccessor - value accessor for the binding
  • isInitial - true if the initial View is about to be displayed, false otherwise
  • oldViewModel - the instance of the ViewModel for the old View
  • newViewModel - the instance of the ViewModel for the new View
Returns:

switching implementation of the ModuleAnimation interface

Type
ModuleElementAnimation

Type Definitions

Animations

All the available animation types supported in ModuleAnimations
Supported Values:
Value
coverStart
coverUp
fade
navChild
navParent
navSiblingEarlier
navSiblingLater
pushEnd
pushStart
revealDown
revealEnd
zoomIn
zoomOut

SwitcherCallBackParam

Properties:
Name Type
isInitial boolean
newViewModel any
node Element
oldViewModel any
valueAccessor function() : any