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调用转换：

    <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传递选项对象：{{3} }

顺便说一下，淡入淡出正在发生，因为这是默认转换，而您的代码没有正确设置新的转换，因此默认使用了。

如何从jQuery Mobile的“幻灯片”转换中消除淡入淡出？

1 个答案: