How can you remove fade from jQuery Mobile slide transition?
I have tried creating my own CSS transition called "realslide" as I want the jQuery Mobile transition to be slippery and not slide and fade away like it does with the current slide transition. However, no matter what I do with my CSS or JS, the transition always disappears. How can I avoid this?
EDIT: I've added a JSFiddle: http://jsfiddle.net/ZqbFA/
<style>
.realslide.in
{
-webkit-transform: translateX(0); opacity: 1;
-webkit-animation-name: slideinfromright; opacity: 1;
}
.realslide.out
{
-webkit-transform: translateX(-100%); opacity: 1;
-webkit-animation-name: slideouttoleft; opacity: 1;
}
@-webkit-keyframes slideinfromright
{
from { -webkit-transform: translateX(100%); opacity: 1;}
to { -webkit-transform: translateX(0); opacity: 1;}
}
@-webkit-keyframes slideouttoleft
{
from { -webkit-transform: translateX(0); opacity: 1; }
to { -webkit-transform: translateX(-100%); opacity: 1; }
}
.realslide.in.reverse
{
-webkit-transform: translateX(0); opacity: 1;
-webkit-animation-name: slideinfromleft; opacity: 1;
}
.realslide.out.reverse
{
-webkit-transform: translateX(100%); opacity: 1;
-webkit-animation-name: slideouttoright; opacity: 1;
}
@-webkit-keyframes slideinfromleft
{
from { -webkit-transform: translateX(-100%); opacity: 1;}
to { -webkit-transform: translateX(0); opacity: 1;}
}
@-webkit-keyframes slideouttoright
{
from { -webkit-transform: translateX(0); opacity: 1;}
to { -webkit-transform: translateX(100%); opacity: 1;}
}
</style>
And then JS will trigger the transition:
<script>
$(function(){
$('div.ui-page').live("swipeleft", function() {
var nextpage = $(this).next('div[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0)
{
$.mobile.changePage(nextpage, 'realslide');
}
});
$('div.ui-page').live("swiperight", function() {
var prevpage = $(this).prev('div[data-role="page"]');
// swipe using id of next page if exists
if (prevpage.length > 0)
{
$.mobile.changePage(prevpage, 'realslide', true);
}
});
});
</script>
source to share
Your function calls $.mobile.changePage()
do not follow the format of the jQuery Mobile version you are using (1.1.0-RC1):
$.mobile.changePage(nextpage, { transition : 'realslide'});
and
$.mobile.changePage(prevpage, { transition : 'realslide', reverse : true });
You used the old method to pass parameters to a function changePage
, you will want to check these docs for how to pass an option object for newer jQuery Mobile releases: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/ methods.html
By the way, the fade was happening because this is the default transition and your code has incorrectly configured the new transition, so the default is used.
source to share