CODEWITHSUNDEEP
ipadcssjquery-mobilecordovacss-transitions
bafromca
bafromca

Reputation: 1946

jQuery Mobile transition easing on iPad

I have a really simple set of CSS transitions that I've called 'realslide'. All it does it slide (whereas jQuery Mobile's 'slide', slides and fades). I am trying to get some easeOutCubic-like easing to work, where the animation is faster at the beginning and nestles in slowly as it finishes it's transitons.

Matthew Lein has made an excellent website for custom CSS easing: http://matthewlein.com/ceaser/

However, when I add this to jQuery Mobile, the transitions are almost non-existant and extremely laggy. This is confusing because it seems to do 3D transitions just fine.

Does anyone know what's going on? I'm using iPad 2 / iOS 5.1, jQuery Mobile 1.1.0-RC1, PhoneGap 1.4.

My JSFiddle: http://jsfiddle.net/4TLLc/

My transition:

.realslide.in
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

.realslide.out
{
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}

.realslide.in.reverse
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromleft;
}

.realslide.out.reverse
{
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromright
{
    from { -webkit-transform: translateX(100%);}
    to { -webkit-transform: translateX(0);}
}

@-webkit-keyframes slideouttoleft
{
    from { -webkit-transform: translateX(0);}
    to { -webkit-transform: translateX(-100%);}
}

@-webkit-keyframes slideinfromleft
{
    from { -webkit-transform: translateX(-100%);}
    to { -webkit-transform: translateX(0);}
}

@-webkit-keyframes slideouttoright
{
    from { -webkit-transform: translateX(0);}
    to { -webkit-transform: translateX(100%);}
}

The animation that kills PhoneGap's webkit window:

.ui-page
{
    -webkit-transition: all 750ms cubic-bezier(1.000, 1, 0.265, 1); /* older webkit */
    -webkit-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
       -moz-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
        -ms-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
         -o-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
            transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); /* custom */
}

Upvotes: 0

Views: 1542

Answers (1)

Bob
Bob

Reputation: 21

Try replacing translateX(x) with translate3d(x, y, z).

translate3d triggers gpu acceleration where translateX does not.

Upvotes: 2

Related Questions