Jquery Mobile Page Transition Without Jquery Mobile

jQuery Mobile CSS3 Page Transitions without jQuery Mobile Library

Download the non-minified version of the CSS file for jQuery Mobile and copy out the classes for the specific transitions you want.

The CSS can be found here: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

And the code for transitions starts at line 1270. If you copy-out all of the CSS classes for transitions, it's only about 6KB of info.

Here is some example code from the above CSS file:

.viewport-flip {
    -webkit-perspective: 1000;
    position: absolute;
}

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flip {
    -webkit-animation-duration: .65s;
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}

.flip.out {
    -webkit-transform: rotateY(-180deg) scale(.8);
    -webkit-animation-name: flipouttoleft;
}

.flip.in {
    -webkit-transform: rotateY(0) scale(1);
    -webkit-animation-name: flipinfromleft;
}

So to flip-in an element you would add the .flip class and the .in class, and to flip-out an element you would add the .flip class and the .out class.

Also the jQuery CSS only includes -webkit- prefixes but if you want to support more browsers you can add other prefixes like: -moz-, -o-, etc.

JQuery mobile page transition without jQuery mobile

I found a decent solution to this.
Check out 'Non-Jquery Page Transitions lightweight' by fasw.

Demo here:
http://www.fasw.ws/demos/transitions1/slide1.html

And source here:
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

This is 1.7k of JS producing transitions that are just like those produced by the whole mobile jQuery Lib.

JQuery mobile - Use transitions without using changePage

Animation classes in jQuery Mobile can be found here. To use them, all you need to do is to add animation class name e.g. fade plus animation class, either in or out.

Moreover, make sure you remove those classes after animation ends by listening to animationend event.

$("element")
    .addClass("in pop")
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
    $(this)
        .removeClass("in pop"); /* remove animation classes */
});

---

Update 1

Check browser's Animation/Transition support, the below should return true.

$.support.cssAnimations
$.support.cssTransitions
$.support.cssTransform3d

For example

if (!$.support.cssAnimations) {
  /* don't animate */
}

---

Update 2

The default fallback transition for browsers that don't support Transform3d is fade. The below code is updated to reflect this by checking whether current browser supports Transform3d.

---

Details

Let's you want to animate the below divs dynamically in or out.

<!-- buttons for demo -->
<a href="#" class="ui-btn ui-btn-inline" data-custom="in">Animate-in</a>
<a href="#" class="ui-btn ui-btn-inline" data-custom="out">Animate-out</a>
<!-- divs -->
<div class="animateDiv" data-transition="pop"></div>
<div class="animateDiv" data-transition="flip"></div>

Add data-transition attribute to div that should be be equal to animation class. Also, add data-custom or any custom data attribute to define in which direction you divs to be animated, whether in or out.

Then control them with JS.

$(document).on("pagecreate", function (e, ui) {
    /* check support */
    var support = $.support.cssTransform3d && $.support.cssTransitions && $.support.cssAnimations ? true : false;

    $(".ui-btn").on("click", function () {
        var direction = $(this).data("custom"); /* in or out */
        $(".animateDiv").each(function () {
            var animation = support ? $(this).data("transition") + " " + direction : "fade " + direction; /* set "fade" if support is false */
            $(this).addClass(animation);
        });
    });

    $(document).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".out, .in", function (e) {
        var outORin = $(this).hasClass("in") ? "in" : "out",
            animated = support ? $(this).data("transition") : "fade";
        $(this).removeClass(animated);
    });
});

Demo - Code

Demo - Code (Fallback)

Bonus Demo

Is there a light alternative to jQuery Mobile for just page transitions?

Update, found this:

http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

Looks as if this guy has been able to (almost) extract JQM's transitions to a stand-alone script..

Inspired by this I wrote this script which flips between pages: http://jsfiddle.net/AAfek/47

Use document.querySelector or querySelectorAll instead of using document.all.tags

Works a treat for my purposes..

JQuery Mobile: Disable page transitions only on back/forward buttons

According to this article, yes you can. When browser's buttons are used, options.direction returns either back or forward. And then change options.transition to none.

$(document).on("pagecontainerbeforechange", function (e, data) {
  if (data.options.direction == "back" || data.options.direction == "forward") {
      data.options.transition = "none";
  }
});

jQuery Mobile page transitions aren't working

You will really need to take a look at rewriting how and where you call your animations in the jqm structure.

pagebeforechange, pagebeforeload, pagebeforecreate, etc.. If you have shut off the ajax you are disabling alot of this functionality. I don't think you are going to find a singular answer that will solve your problem outright. We struggled with it as well and finally had to find a compromise and a lot of testing to find the right combination of usage with our templating structures (pure.js).

---

Related Topics