Screen Transition: How to always move from left-to-right

Question

I am developing a phone application and I have two buttons at the top of the screen: "back" and "next". Whenever I click the next button the screen moves from right-to-left and most of the time I click the back button, it moves from left-to-right; however, every so often, clicking 'back' transitions from right-to-left.

This is the code that i have for the back button:

.html

<a href="#" data-rel="back"  data-role="button" data-inline="true" data-transition="myTransition" data-direction="reverse">Back</a>

.js

(function( $, undefined ) {

$.mobile.page.prototype.options.backBtnText  = "Back";
$.mobile.page.prototype.options.addBackBtn   = false;
$.mobile.page.prototype.options.backBtnTheme = null;
$.mobile.page.prototype.options.headerTheme  = "a";
$.mobile.page.prototype.options.footerTheme  = "a";
$.mobile.page.prototype.options.contentTheme = null;

$( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagecreate", function( e ) {

var $page = $( this ),
    o = $page.data( "page" ).options,
    pageRole = $page.jqmData( "role" ),
    pageTheme = o.theme;

$( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
    var $this = $( this ),
        role = $this.jqmData( "role" ),
        theme = $this.jqmData( "theme" ),
        contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
        $headeranchors,
        leftbtn,
        rightbtn,
        backBtn;

    $this.addClass( "ui-" + role ); 

    //apply theming and markup modifications to page,header,content,footer
    if ( role === "header" || role === "footer" ) {

        var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;

        $this
            //add theme class
            .addClass( "ui-bar-" + thisTheme )
            // Add ARIA role
            .attr( "role", role === "header" ? "banner" : "contentinfo" );

        // Right,left buttons
        $headeranchors  = $this.children( "a" );
        leftbtn = $headeranchors.hasClass( "ui-btn-left" );
        rightbtn = $headeranchors.hasClass( "ui-btn-right" );

        leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;

        rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;

        // Auto-add back btn on pages beyond first view
        if ( o.addBackBtn && 
            role === "header" &&
            $( ".ui-page" ).length > 1 &&
            $this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
            !leftbtn ) {

            backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
                // If theme is provided, override default inheritance
                .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
                .prependTo( $this );                
        }

        // Page title
        $this.children( "h1, h2, h3, h4, h5, h6" )
            .addClass( "ui-title" )
            // Regardless of h element number in src, it becomes h1 for the enhanced page
            .attr({
                "tabindex": "0",
                "role": "heading",
                "aria-level": "1"
            });

    } else if ( role === "content" ) {
        if ( contentTheme ) {
            $this.addClass( "ui-body-" + ( contentTheme ) );
        }

        // Add ARIA role
        $this.attr( "role", "main" );
    }
});
});

})( jQuery );

EDIT:

this is the transition that i created

function myTransitionHandler( name, reverse, $to, $from ) {

var deferred = new $.Deferred(),
    reverseClass = reverse ? " reverse" : "",
    viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
    doneFunc = function() {

        $to.add( $from ).removeClass( "out in reverse " + name );

        if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
            $from.removeClass( $.mobile.activePageClass );
        }

        $to.parent().removeClass( viewportClass );

        deferred.resolve( name, reverse, $to, $from );
    };

$to.animationComplete( doneFunc );

$to.parent().addClass( viewportClass );

if ( $from ) {
    $from.addClass( name + " out" + reverseClass );
}
$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );

return deferred.promise();
}

// Make our transition handler public.
$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;

Is there any code that I can add to make the screen always move from left-to-right when the back button is clicked?

Answer 1

jQuery mobile appears to only allow you to specify a transition ( seen here ) and then program for its opposite for when you specify the data-direction="reverse" property.

I have also experienced this behavior that the back-button (even the browser's back-button) can sometimes trigger a 'forward acting' transition. I'm not how one would go about changing this / forcing a button to transition always in the same direction.

However, there might be some promise in setting up your own transitions . If you were to do that, (which I haven't) then you might be able to apply a transition that only goes one direction whether jQuery mobile believes it is forward or reversed and regardless of the data-direction property.

.my.slide.out {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -moz-animation-name: slideouttoleft;
}
.my.slide.in {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -moz-animation-name: slideouttoleft;
}

And then apply these transitions to your back-button.