jQuery Mobile在iPad上轻松过渡

Question

我有一组非常简单的CSS转换，我称之为"realslide"。它所做的一切都是滑动的（而jQuery Mobile的"滑动"、滑动和淡入淡出）。我正试图让一些像easeOutCubic一样的轻松工作，动画在开始时更快，在结束过渡时慢慢融入。

Matthew Lein为自定义CSS轻松创建了一个出色的网站：http://matthewlein.com/ceaser/

然而，当我将其添加到jQueryMobile中时，转换几乎不存在，而且非常滞后。这很令人困惑，因为它似乎可以很好地进行3D转换。

有人知道发生了什么事吗？我使用的是iPad2/iOS 5.1，jQuery Mobile 1.1.0-RC1，PhoneGap 1.4。

我的JSFiddle：http://jsfiddle.net/4TLLc/

我的过渡：

.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%);}
}

杀死PhoneGap的webkit窗口的动画：

.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 */
}

Answer 1

尝试用translate3d(x, y, z)替换translateX(x)。

CCD_ 3触发gpu加速，而CCD_。