Namespace: ModuleAnimations

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

QuickNav

Fields

oj. ModuleAnimations

Version:
  • 3.2.0
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 acheive 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.
Source:

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.
Source:

<static> coverUp

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

<static> drillIn

ModuleAnimation implementation for drilling in to 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
Deprecated:
  • This is deprecated. Please use navChild instead.
    Source:

    <static> drillOut

    ModuleAnimation implementation for drilling out of 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
    Deprecated:
    • This is deprecated. Please use navParent instead.
      Source:

      <static> fade

      ModuleAnimation implementation for changing views by fading in the new view and fading out the old view.
      Source:
      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".

      Source:
      Example

      Set the default in the theme (SCSS) :

      $animationNavChildDefault:  coverStart  !default;
      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".

      Source:
      Example

      Set the default in the theme (SCSS) :

      $animationNavParentDefault:  revealEnd  !default;
      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".

      Source:
      Example

      Set the default in the theme (SCSS) :

      $animationNavSiblingEarlierDefault:  pushEnd  !default;
      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".

      Source:
      Example

      Set the default in the theme (SCSS) :

      $animationNavSiblingLaterDefault:  pushStart  !default;

      <static> pushEnd

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

      <static> pushStart

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

      <static> revealDown

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

      <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.
      Source:

      <static> zoomIn

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

      <static> zoomOut

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

      Methods

      <static> createAnimation(oldViewEffect, newViewEffect, newViewOnTop) → {Object}

      Create and return a ModuleAnimation implementation that combines base effects from oj.AnimationUtils
      Parameters:
      Name Type Description
      oldViewEffect null | string | Object an animation effect for the outgoing view.

      If this is null, no animation will be applied.
      If this is a string, it should be one of the effect method names in oj.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 oj.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 oj.AnimationUtils for available options.
      newViewEffect null | string | Object 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.
      Source:
      Returns:
      an implementation of the ModuleAnimation interface
      Type
      Object
      Example

      Create a custom ModuleAnimation that fades out old view by 50% and slides in the new view:

      var customAnimation = oj.ModuleAnimations.createAnimation({"effect":"fadeOut", "endOpacity":0.5}, {"effect":"slideIn", "direction":"end"}, true);

      <static> switcher(callback) → {Object}

      Returns an implementation of ModuleAnimation interface that switches between different animation implementations
      Parameters:
      Name Type Description
      callback Function a callback function whose return value should be a string containing one of the animation types supported by oj.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
      Source:
      Returns:
      switching implementation of the ModuleAnimation interface
      Type
      Object