Vue Common - Utils - animationPresets

A repository of animations.

import animationPresets from "devextreme/animation/presets"
Type:

Object

To avoid defining animations each time you animate an element(s), register different animations in the DevExtreme.animationPresets repository and request them by associated names when required. This repository has a built-in set of animations. Here they are:

  • fade
  • stagger-fade
  • slide
  • stagger-slide
  • ios7-slide
  • overflow
  • ios7-toolbar
  • stagger-smooth-drop
  • stagger-drop
  • stagger-3d-drop
NOTE
Stagger-like animations are executed by the transitionExecutor only. They cannot be applied by calling the animate method for a particular element.

To populate the animationPresets repository with your animations, use the registerPreset(name, config) method. To get the required animation from the repository, use the getPreset(name) method.

applyChanges()

Applies the changes made in the animation repository.

The animation repository is a non-simple collection of animation presets. This is a device-dependent collection where the presets that you register are sorted by devices so that the getPreset(name) method returns the animation configuration that is specific to the current device. Thus, adding of an animation preset to the animation repository includes not just the registration but an update of the total collection as well. So, not to waist time on the collection update each time a preset is registered in it, the repository exposes the applyChanges() method. Call this method after you registered all the required animation presets so that the repository update is then performed once.

clear()

Removes all animations from the repository.

clear(name)

Deletes an animation with a specific name.

Parameters:
name:

String

The animation's name.

NOTE
If you need to have predefined animations in the repository and delete only custom animations, call the resetToDefaults() method instead.

getPreset(name)

Gets the configuration of an animation with a specific name.

Parameters:
name:

String

The animation's name.

Return Value:

AnimationConfig

The animation configuration.

Note that several animation configurations can be registered in the animationPresets repository by a single name, because they are targeted for different devices. When you call the getPreset(name) method, the configuration registered for the current device will be returned.

registerDefaultPresets()

Registers predefined animations in the animation repository.

By default, the animation repository includes predefined animations. You may need to call this method in case you deleted them by the clear(name) method.

NOTE
The changes performed by this method are not applied to the repository automatically. You should also call the applyChanges() method then. But consider calling the latter method once after you made all the required changes so that the update the repository does not take much time.

registerPreset(name, config)

Adds an animation with a specific name to the animation repository.

Parameters:
name:

String

The animation's name.

config:

Object

Information on the animation.

Object structure:
Name Type Description
animation

AnimationConfig

The animation's configuration.
device

Device

The animation's target device.

The animation repository allows you to store common animations that can be used for different elements in an application/site. These common animations are the presets that are registered by certain names. These presets can define the same animation, thus they have the same name, but be targeted for different devices, thus they have different animation configurations. Here is an example of an iOS-specific animation preset registered by the "my-animation" name.

JavaScript
DevExpress.animationPresets.registerPreset('my-animation', {
    device: { platform: 'ios' },
    animation: {
        //iOS-specific animation configuration
    }
});

If you do not specify the device field of the preset, the preset will be used on any device.

JavaScript
DevExpress.animationPresets.registerPreset('my-animation', {
    animation: {
        //common animation configuration 
    }
});

The following request will return the iOS-specific animation configuration when the application is running on an iOS device and the common animation configuration on any other device.

JavaScript
DevExpress.animationPresets.getPreset('my-animation');

You can register several animation presets common for all devices and then use them to register device specific presets under another name. Here is an example where the default presets are used to register another preset with a specific animation configurations used in iOS and on desktop.

JavaScript
DevExpress.animationPresets.registerPreset( 'view-content-change', { animation: 'slide' } );
DevExpress.animationPresets.registerPreset('view-content-change', { animation: 'ios7-slide', device: { platform: 'ios' } } );
DevExpress.animationPresets.registerPreset('view-content-change', { animation: 'fade', device: { deviceType: 'desktop', platform: 'generic' } } );
NOTE
The changes performed by the registerPreset(name, config) method are not applied to the animation repository automatically. You should also call the applyChanges() method then. But consider calling the latter method once after you made all the required changes, because a single update of the repository takes less time then the updates performed each time you make a change.

resetToDefaults()

Deletes all custom animations.

Initially, the animation repository includes a set of predefined animations. You can add custom animations as well. If you need to clear the repository from custom animations and leave only predefined ones, call the resetToDefaults method. It will clear the repository and register the predefined animations applying all these changes once.