Interface: ModuleElementAnimation

Usage

Typescript Import Format

//To use this interface, import as below.
import {ModuleElementAnimation} from "ojs/ojmodule-element";

For additional information visit:

A duck-typing interface that defines a contract for managing animations during the oj-module element View transitions. Use 'animation' attribute on the Module to set ModuleElementAnimation instance.

Methods

animate(context) : {Promise}

Prepares animation by designating where the new View should be inserted and optionally specifying where the old View should be moved

Parameters:

Name Type Description

context

Object

a context object with the keys detailed below

Properties

Name	Type	Description
`node`	Node	a DOM node for the oj-module element
`isInitial`	boolean	true if the initial View is about to be displayed, false otherwise
`oldViewModel`	oj.ModuleViewModel	the instance of the ViewModel for the old View
`newViewModel`	oj.ModuleViewModel	the instance of the ViewModel for the new View
`newViewParent`	Node	the 'newViewParent' parameter returned by the prepareAnimation() method
`oldViewParent`	Node	the 'oldViewParent' parameter returned by the prepareAnimation() method
`removeOldView`	()=> undefined	calling this function will remove the DOM nodes representing the old View. If this function is not invoked by the ModuleElementAnimation implementation, and the old View is still connected when the Promise is resolved, the old View will be removed by the component.
`insertNewView`	()=> undefined	calling this function will insert new View's DOM nodes into the location managed by the component. If this function is not invoked by the ModuleElementAnimation implementation, and the new View is not at its intended location when the Promise is resolved, the View will be moved by the component.
`oldDomNodes`	Array	an array of DOM nodes representing the old View

Returns:

- a Promise that should be resolved when the animation, moving/removing of DOM nodes and the cleanup are complete. Note that the component will not be able to navigate to a new View until the Promise is resolved.

Type: Promise

canAnimate(context) : {boolean}

Optional method that determines whether the animated transition should proceed. If the method is not implemented, all transitions will be allowed to proceed

Parameters:

Name Type Description

context

Object

a context object with the keys detailed below

Properties

Name	Type	Description
`node`	Node	a DOM node for the oj-module element
`isInitial`	boolean	true if the initial View is about to be displayed, false otherwise
`oldViewModel`	oj.ModuleViewModel	the instance of the ViewModel for the old View
`newViewModel`	oj.ModuleViewModel	the instance of the ViewModel for the new View

Returns:

true if animation should proceed, false otherwise

Type: boolean

prepareAnimation(context) : (nullable) {null|{ newViewParent?: Node, oldViewParent?: Node }}

Prepares animation by designating where the new View should be inserted and optionally specifying where the old View should be moved

Parameters:

Name Type Description

context

Object

a context object with the keys detailed below

Properties

Name	Type	Description
`node`	Node	a DOM node for the oj-module element
`isInitial`	boolean	true if the initial View is about to be displayed, false otherwise
`oldViewModel`	oj.ModuleViewModel	the instance of the ViewModel for the old View
`newViewModel`	oj.ModuleViewModel	the instance of the ViewModel for the new View

Returns:

an object that may contain values for the following keys:

'newViewParent' - a DOM node where the new View should be inserted. If this parameter is not specified, the new View will be inserted into the node associated with the oj-module element
'oldViewParent' - a DOM node where the old View should be moved. If this parameter is not specified, the old View will not be moved

Type: null|{ newViewParent?: Node, oldViewParent?: Node }