屏幕过渡：如何始终从左向右移动

Question

我正在开发一个电话应用程序，屏幕顶部有两个按钮：“返回”和“下一步”。每当我单击下一个按钮时，屏幕都会从右向左移动，而在大多数情况下，我单击后退按钮，它都会从左向右移动；然而，每隔一段时间，点击“返回”就会从右到左转换。

这是后退按钮的代码：

.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 );

编辑：

这是我创建的过渡

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;

我可以添加任何代码来使单击后退按钮时屏幕始终从左向右移动吗？

Answer 1

jQuery mobile 似乎只允许您指定转换 (seen here)，然后在您指定 data-direction="reverse" 属性时为其相反的方向编程。

我也遇到过这种行为，即后退按钮（甚至是浏览器的后退按钮）有时会触发“向前作用”转换。我不会去改变这个/强制一个按钮总是在同一个方向上转换。

不过，setting up your own transitions 中可能会有一些承诺。如果您要这样做（我没有这样做），那么无论 jQuery mobile 认为它是正向还是反向，并且无论 data-direction 属性如何，您都可以应用只向一个方向进行的转换。

.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;
}

然后将这些过渡应用到您的后退按钮。