DevExtreme Angular - Animate the Content Appearance

To animate the content when it appears on the page, specify the animation option. You can assign one of the predefined animations or an object configuring custom animation to this option.

HTML
<div data-options="dxView: { name: 'Products', title: 'Products' }">
    <div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: {
        showLoadIndicator: true,
        renderWhen: isReady,
        animation: 'slide'
    }">
        <!-- Widget content -->
    </div>
</div>

In most cases, elements appear on the page as a single whole, but if you have a collection of similar elements, they can appear one after another in a uniform fashion. This is called "staggering animation". For example, if the DeferRendering contains the List widget, you can animate each item of the List using the following configuration.

HTML
<div data-options="dxView: { name: 'Products', title: 'Products' }">
    <div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: {
        showLoadIndicator: true,
        renderWhen: isReady,
        animation: 'stagger-3d-drop',
        staggerItemSelector: '.dx-list-item'
    }">
        <div data-bind="dxList: {
            ...
        }">
        </div>
    </div>
</div>

Here, the .dx-list-item is a selector pointing to each List item. Note also that the animation option accepts one of the predefined animations. All predefined staggering animations have a stagger- prefix in their names.

See Also