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.

2 thoughts on “Transition styles in Kendo UI Mobile

  1. Great post! Is it possible to change the default transition that’s previously set at the application level? Something along the lines of: window.kendoMobileApplication.transition = “slide”;

Leave a Reply to Anders Lindén Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.