jQuery/JS Common - Utils - animationPresets

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

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.

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.

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.

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.

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.

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.

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.

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.

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' } } );

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.