What are jQuery Mobile transitions?

Overview

In this shot, we will learn about jQuery Mobile transitions, which provide us with ways to add the transition effect to HTML pages.

There are many transition effects, such as flip, fade, pop, slide, slide fade, and many more. To add a transition effect in the HTML page or its element, we need to add the data-transition attribute and assign the type of effect we want.

Example

Let’s write a code to add the transition effect to the page. The default effect is fade, and we will assign a flip effect to our page.

Explanation

• Line 12: We define data-role. This div element is a page or container displayed in the browser.

• line 14: We use a child div with class ui-content. This class gives us a good UI for the page.

• Line 15: We use a paragraph tag with sample text.

• Line 16: We use an anchor tag linked (href=#last) to the other page (container). The page is defined below. We use jQuery’s data-transition property and assign the transition type flip to it.

• Lines 21 to 28: We create another page similar to the page above but with different text and transition effects.

Output

When we click the link Last page on the browser, we see a flip transition effect when we navigate to another page.