jquery - 如何消除 jQuery Mobile "slide"过渡的淡入淡出？

Question

我尝试创建自己的 CSS 过渡，称为“realslide”，因为我希望 jQuery Mobile 过渡能够滑动，而不是像当前“幻灯片”过渡那样滑动和淡入淡出。然而，无论我用 CSS 或 JS 做什么，过渡总是会消失。我怎样才能避免这种情况？

编辑:我添加了一个 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>

然后JS调用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>

Answer 1

您的 $.mobile.changePage() 函数调用的格式不适合您正在使用的 jQuery Mobile 版本 (1.1.0-RC1):

$.mobile.changePage(nextpage, { transition : 'realslide'});

并且

$.mobile.changePage(prevpage, { transition : 'realslide', reverse : true });

您使用旧方法将选项传递给 changePage 函数，您需要查看这些文档以了解如何为新版本的 jQuery Mobile 传递选项对象:http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

顺便说一句，发生淡入淡出是因为这是默认过渡，并且您的代码没有正确设置新过渡，因此使用了默认过渡。