CODEWITHSUNDEEP
javascriptjquerycssjquery-mobilecss-transitions
Rayjax
Rayjax

Reputation: 7784

JQuery mobile - Use transitions without using changePage

I am using JQM 1.4 and backbone together.

In the beginning of my project, I was using a config file to disable the JQM router and use the backbone one instead, which called the JQM "changePage" method programmatically on hash change.

But I've got too much problems making it work as I want, while all I need from changePage is the CSS3 transition.

The best option I have is to find a way to use jquery mobile transitions (slide, pop, fade...) without using changePage. If I could use those transitions on DIVs, it would be perfect.

Any clue on how to do that ? I know that there are fine libraries like effeckt.css but I think that JQM is the more mobile-cross-browser compatible (correct me if I am wrong).

Upvotes: 2

Views: 514

Answers (1)

Omar
Omar

Reputation: 31732

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

Upvotes: 4

Related Questions