CODEWITHSUNDEEP
androidcordovajquery-mobiletransition
KwintenP
KwintenP

Reputation: 4775

Lack of transitions in Phonegap using JQuery Mobile on Android 2.3

After doing a little research via google an such I did not found the solution to my problem hence the question. I'm trying to build a Phonegap app(2.0.0) using JQueryMobile(1.1.1). I watched some tutorials and i've implemented a rather simple app. The problem when i install the .apk on my HTC desire(Android 2.3) there are NO transitions. It just 'blinks' to the new screen.

<div data-role="page" id="page1">
        <div data-role="content" style="padding: 15px">
        <a href="#page2" data-transition="slide" >link</a>
        </div>
    </div>

In my android manifest file i added this

<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="8" />

which doesn't help

My question is, how come? Am I overlooking something or is this something normal that can't be done with android 2.3 in combination with PG and JQM?

Thanks in advance for any answer on my probably stupid question ;)

Btw: Are there better solutions to implement transitions?

Upvotes: 1

Views: 963

Answers (1)

Apostolos Emmanouilidis
Apostolos Emmanouilidis

Reputation: 7197

As stated in the jQM 1.1.1 Docs:

By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.

The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":

$.mobile.transitionFallbacks.slideout = "none"

Upvotes: 2

Related Questions