Transition styles in Kendo UI Mobile

In this post we will learn different Transition Styles between Kendo UI Mobile Views.

To start with let us assume we have an application as following. This application consists of two views. On click of Kendo button, user will navigate to Other View.


There are four supported Transition styles, they are as follows


Overlay transition style

See the video for the behavior of Overlay transition style

Slide transition style

See the video for the behavior of Slide transition style

Zoom transition style

See the video for the behavior of Zoom transition style

Fade transition style

See the video for the behavior of Fade transition style

Default transition style is “slide”. We can apply transition style in three ways

  1. At the application level
  2. At the view level
  3. At the control level

At Application Level

When set at application level same transition style will be applied to entire application. All views of the application will adhere to the same transition style. At application level transition style can be set by providing value of transition property in Kendo mobile initialization.


At View Level

Other option to set transition style is at view level. On navigating to this view user will experience transition style set at the view.


At Control Level

We can set transition style at control level as well. In following case we are applying transition style to a kendo button. User will experience zoom transition behavior while navigating to view set in the href property of the keno button.


If  transition style is set at all the three levels then Control level has highest priority whereas application level has lowest priority.


In this way you can apply different transition style to the application. For your reference find the source code of above discussed application below.

<!DOCTYPE html>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />

<div data-role="layout" data-id="applayout">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title"></span>

<div data-role="view" id="mainview" data-title="Main View">
<a id="navigate"
Navigate to other view

<div data-role="view"
data-title="Other View"



var app = new,
transition: "overlay",


I hope you find this post useful. Thanks for reading.