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.
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.
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.
When we click the link Last page
on the browser, we see a flip
transition effect when we navigate to another page.