I have a html with two internal pages (data-role="page"). One of the pages shows a days date and data which are connected to this date. When I swipe left or right the day should change.
What I need here is to get the page transition to show. It seems like I can't use the $.mobile.changePage()
for the same page. Ultimately I don't want to refresh the page since I have some global variables I have to keep.
Any suggestions how I can achieve this?
EDIT: Found the solution Here. Used this line of code:
$.mobile.changePage( "#reused-page", { allowSamePageTransition: true } );
To change your page transitions:Select Animation from the drop-down menu. Click an animation type to apply it to your site. Click the drop-down under Page Transition and select a page transition style.
A shared element transition determines how a view that is shared between two fragments moves between them. For example, an image displayed in an ImageView in fragment A transitions to fragment B once B becomes visible.
Different Effects – Consider the various ways that new pages can be effectively served on a site. Not every transition will work well for every website, so it is important to find the best style for each site.
Page transitions are a fundamental part of website navigation and user experience, they help to create visual continuity and entertain the user while all the assets are loading.
Something like this should do:
$.mobile.changePage( "#other-page", { allowSamePageTransition:true } );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With