Angular Common - Utils - TransitionExecutor

The manager that performs several specified animations at a time.

import TransitionExecutor from "devextreme/animation/transition_executor"

While there are scenarios when animating certain elements is required, there can be more complex scenarios when you need to perform a transition - several animations of different elements performed simultaneously. For instance, when you navigate from a view to another view in a mobile application, the content of the new view replaces the content of the old view. Moreover, the header can be animated differently from the rest of the content on both views. Thus, four different animations must be performed simultaneously. To simplify the implementation of such scenarios, the TransitionExecutor is implemented.

To register the set of animations to be performed simultaneously, use the enter(elements, animation) and leave(elements, animation) methods of the TransitionExecutor object. Use the enter(elements, animation) method to specify the elements that should appear ("enter") on the page with a specified animation. The leave(elements, animation) method should be called if there are elements that must disappear ("leave") from the page.

The TransitionExecutor object is also useful when a need arises to perform a staggered animation of elements when elements are animated with a slight delay after animation of each successive element starts resulting in a curtain-like effect. In this instance, each element should be registered with by the enter(elements, animation)/leave(elements, animation) method with the animation configuration where the staggerDelay property is specified.

To start a transition, call the start() method of the TransitionExecutor object. To clear the registered set of animations in the TransitionExecutor object, call the reset() method.

enter(elements, animation)

Registers the set of elements that should be animated as "entering" using the specified animation configuration.

Parameters:
elements:

jQuery

The elements to be animated.

animation:

AnimationConfig

|

String

The animation configuration or the name of an animation from the animationPresets repository.

Before starting a transition (a set of simultaneous animations), the elements that will take part in it and the animation configurations to be used to animate these elements should be registered. For this purpose, use the enter(elements, animation) method. The elements registered using this method will be animated as "entering" ones. To register elements for a "leaving" animation within this transition, use the leave(elements, animation) method.

If you pass a name of a predefined animation as the second parameter, but an animation is not found by this name in the animation repository, the specified element(s) will not be animated within this transition.

leave(elements, animation)

Registers a set of elements that should be animated as "leaving" using the specified animation configuration.

Parameters:
elements:

jQuery

The elements to be animated.

animation:

AnimationConfig

|

String

The animation configuration or the name of an animation from the animationPresets repository.

Before starting a transition (a set of simultaneous animations), the elements that will take part in it and the animation configurations to be used to animate these elements should be registered. For this purpose, use the enter(elements, animation) method. The elements registered using this method will be animated as "entering" ones. To register elements for a "leaving" animation within this transition, use the leave(elements, animation) method.

If you pass a name of a predefined animation as the second parameter, but an animation is not found by this name in the animation repository, the specified element(s) will not be animated within this transition.

reset()

Deletes all the animations registered in the Transition Executor by using the enter(elements, animation) and leave(elements, animation) methods.

start()

Starts all the animations registered using the enter(elements, animation) and leave(elements, animation) methods beforehand.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after all the animations are finished. It is a native Promise or a jQuery.Promise when you use jQuery.

stop()

Stops all started animations.