From v18.1, the DevExtreme hybrid mobile-related tools, including DevExtreme SPA Framework, are deprecated. See this blog post for more information.

A markup component used to configure transitions for content that changes in a layout.

Included in:, dx.web.js, dx.viz-web.js, dx.all.js


Use the dxTransition markup component to specify the type of animation shown when the contents of a layout element are being changed.

Enclose the required part of the layout in a dxTransition element to apply the specified transition type to this part. In this case, when you switch between views, the contents of the enclosed part will change smoothly, according to the specified transition type.

The following example shows a layout whose "header" and "content" content placeholders are enclosed in a dxTransition element.

<div data-options="dxLayout : { name: 'myLayout' }" >
    <div data-options="dxTransition: { name: 'myTransition', animation: 'slide' }">
        <div data-options="dxContentPlaceholder : { name: 'header'} " >
            <div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }"> </div>
        <div data-options="dxContentPlaceholder : { name: 'content'}">
            <div class="load-panel" data-bind="dxLoadPanel: { visible: true }"> </div>
    <div data-options="dxContentPlaceholder : { name: 'footer' }">
        <div data-bind="dxNavBar: { }" 
            data-options="dxCommandContainer: { id: 'footer-command-container' }">


This section describes configuration options used to create a transition.

Name Description

Specifies the animation preset used when the content enclosed in the current dxTransition element is being changed.


Specifies the name of the dxTransition component instance.