DevExtreme React - Animation

The DevExtreme SPA framework allows you to make your application "live" - when each view appears and disappears with animation, when different view elements attract your attention by their specific animation, and, generally, when the application is not static but is continuously moving ('living'). The image below details how animation mechanism is organized in DevExtreme applications.

Read below to learn details on this scheme and find out how to apply built-in animations or use custom ones.

In DevExtreme, animations are defined by their configuration objects.

{
    type: 'css',
    from: 'fade-out',
    to: 'fade-out-active',
    duration: 1000
}

.fade-out { opacity: 1; }
.fade-out-active { opacity: 0; }

As you can see, you can define animation using css styles. However, there are several other useful animation types. In the following example, a slide animation is defined.

{
    type: "slide",
    from: { 
        opacity: 0.5,
        top: -100
    },
    to: { 
        opacity: 1,
        top: 0  
    },
    duration: 2000
}

All the configuration options that can be used to define an animation are listed in the animationConfig object defined in the Reference section.

The animations that are used in different places within an application can be registered in the DevExpress.animationPresets repository and then used repeatedly during the application flow.

DevExpress.animationPresets.registerPreset("my-animation", {
    animation: {
        // configuration options are here
    }
});

DevExpress.animationPresets.registerPreset("my-animation", {
    device: { platform: 'ios' },
    animation: {
        // configuration options are here
    }
});

As you can see, animation presets are the animation configurations registered under a certain name for a particular device(s).

DevExtreme comes with several predefined animation presets that are registered in the DevExpress.animationPresets repository.

• 'fade
• 'stagger-fade'
• 'slide'
• 'stagger-slide'
• 'ios7-slide'
• 'overflow'
• 'ios7-toolbar'
• 'stagger-smooth-drop'
• 'stagger-drop'
• 'stagger-3d-drop'

All of these animation presets are CSS device-independent animations.

The animation presets that are not specific to a device can serve as a base for device-specific animation presets. In this instance, the animation presets that are formed from the base presets will be used under a new name when the application runs on a specified device.

DevExpress.animationPresets.registerPreset('my-animation', {
    device: { platform: 'ios' },
    animation: 'ios7-slide'
});

Device-specific animation presets can also be redefined so that they are accessible under particular names. For instance, you can register a custom animation preset under the name that is used in layouts, and you will not have to change the layouts.

DevExpress.animationPresets.registerPreset('view-content-change', { animation: { 'my-animation' } })

In DevExtreme SPA framework-based applications, required animation presets are collected to an animation set of the HtmlApplication object.

MyApp.app = new DevExpress.framework.html.HtmlApplication({
    //...
    animationSet: {
        "view-content-change": [
            { animation: "slide" },
            { animation: "ios7-slide", device: { platform: "ios" } },
            { animation: "fade", device: { deviceType: "desktop", platform: "generic" } },
            { animation: "none", device: { grade: "C" } }
        ],
        "view-content-rendered": [
            { animation: "fade" },
            { animation: "none", device: { grade: "C" } }
        ],
        //...
    },
});

Here, "slide", "ios7-slide", "fade" and "none" are the device-independent predefined animation presets from the DevExpress.animationPresets repository.

Internally, the animation presets defined in this manner are registered in the DevExpress.animationPresets repository using the registerPreset method.

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" } });
DevExpress.animationPresets.registerPreset("view-content-change", { animation: "none", device: { grade: "C" } });
DevExpress.animationPresets.registerPreset("view-content-rendered", { animation: "fade" });
DevExpress.animationPresets.registerPreset("view-content-rendered", { animation: "none", device: { grade: "C" } });
//...

According to the code above, when the "view-content-change" animation is requested, the "ios7-slide" animation preset will be used if the application is running on an iOS device, the "fade" animation - on a desktop, "slide" - on any other device except for the devices that are marked by the "C" grade in DevExtreme. On the latter devices, animation will not be applied because of insufficient performance.

You can use one of the predefined animation sets in your DevExtreme applications. Here they are.

• 'default'
  A default animation set for DevExtreme applications. This set is characterized by a big number of different animations so that your application looks 'live' and attractive out-of-the-box.

• 'native'
  This animation set is organized so that your DevExtreme apps look and behave as a native application on any device.

• 'slide'
  The animation set that applies a 'slide' animation where it is appropriate.

• 'zoom'
  The animation set that applies 'zoom' animation where it is appropriate.

To use a predefined animation set, assign it to the animationSet option of the HtmlApplication object.

MyApp.app = new DevExpress.framework.html.HtmlApplication({
    //...
    animationSet: DevExpress.framework.html.animationSets['slide'],
});

The following animation presets are collected in all of these sets.

• "view-content-change"
  Used to animate the replacement of a view content when navigating from view to view. This preset is specified for the 'content' content placeholder in a markup of predefined layouts.

• "view-content-rendered"
  Can be used to animate the process of displaying view content after it is rendered. If a view's render result is cached, this animation will be applied once when the view appears for the first time. Specify this preset for the dxDeferRendered widget bound to the 'content' view content.

• "view-header-toolbar"
  Used to animate the replacement of a header content when navigating from view to view. This preset is specified for the 'header' content placeholder in a markup of predefined layouts.

• "command-rendered"
  Used by the framework to animate the process of displaying commands in a view.

• "list-item-rendered"
  Can be used to animate the process of displaying a list view. Specify this preset for the dxDeferRendered widget that encloses the content of the list view.

• "detail-item-rendered"
  Can be used to animate the process of displaying a detail view. Specify this preset for the dxDeferRendered widget that encloses the content of the detail view.

• "edit-item-rendered"
  Can be used to animate the process of displaying a detail view in edit mode. Specify this preset for the dxDeferRendered widget that encloses the content of the detail view.

• "layout-change"
  Used to animate the replacement of a layout when navigating from a view contained in one layout to a view contained in another layout. This preset is specified for the dxLayout markup component.

Use the animation presets that you collected within the application's animation set in the following parts of a DevExtreme application.

• Animate a transition to a view.
  When navigating to a view, the replacement of the content in the layout's content placeholders can be animated. To set a required animation preset, use the animation option of the dxTransition or dxContentPlaceholder component in the layout's markup.

  In predefined layouts, the "view-content-change" and "view-header-toolbar" animation presets from the predefined animation sets are used for the 'content' and 'header' content placeholders, respectively.

• Animate the display of view commands.
  The framework uses the "command-rendered" animation preset if it is registered in the application.

• Animate a delayed view content.
  When a view or some of its parts are rendered with a delay (e.g., after data comes from a server), the process of displaying the delayed content can be animated. For this purpose, enclose the view content to be rendered with a delay into the DeferRendering widget and specify the widget's animation option.

• Use staggered animation in a view.
  View elements (e.g., items in a list view) can be animated with a slight delay after animation of each successive element starts resulting in a curtain-like effect. For this purpose, enclose the view content to be shown with the staggered animation into the DeferRendering widget and specify the widget's animation option and staggerItemSelector options. The animation preset that is set to the animation option should have the staggerDelay option specified.

• Display view parts successively with animation.
  When you have a "heavy" view, you can divide its content into several parts, each enclosed into the DeferRendering widget. If you do not specify a moment for rendering each of these parts, they will be shown successively one after another from the top to the bottom with the animation specified in their DeferRendering widget.

In DevExtreme applications, the TransitionExecutor object is used to perform animation. This object is designed so that it can perform several animations simultaneously or in a staggered manner, applying the animation presets that are registered for the device on which the current application is currently running.