Как вы можете убрать переход из «слайдового» перехода jQuery Mobile?

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: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

Кстати, исчезновение происходило, потому что это переход по умолчанию, а ваш код неправильно установил новый переход, поэтому использовался по умолчанию.