How can you remove the fade from jQuery Mobile's "slide" transition?

Question

I've tried creating my own CSS transition called 'realslide', as I want the jQuery Mobile transition to slide, not slide & fade like it's current 'slide' transition performs. However, no matter what I do with my CSS or JS, the transition always fades. How can I avoid this?

EDIT: I added a 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>

And then the JS to call the 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

Your $.mobile.changePage() function calls are not in the proper format for the version of jQuery Mobile you are using (1.1.0-RC1):

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

AND

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

You were using an old method to pass options to the changePage function, you'll want to check-out these docs to see how to pass an option object for new releases of jQuery Mobile: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

By the way, the fade was occurring because that is the default transition, and your code had not properly set a new transition so the default was being used.