Transition Style

Transition styles in Kendo UI Mobile

Posted by

2

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.

image

There are four supported Transition styles, they are as follows

image

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.

image

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.

image

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.

image

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

image

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>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>

<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>
</header>
</div>

<div data-role="view" id="mainview" data-title="Main View">
<a id="navigate"
href="#otherview"
data-role="button"
>
Navigate to other view
</a>
</div>

<div data-role="view"
id="otherview"
data-title="Other View"
>

</div>

<script>

var app = new kendo.mobile.Application(document.body,
{
transition: "overlay",
inital:"mainview",
layout:"applayout"
});
</script>

</body>
</html>

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

Advertisement