Question

我有一组非常简单的CSS过渡，我称之为'realslide'。所有它都滑动（而jQuery Mobile的'幻灯片'，幻灯片和淡入淡出）。我试图让一些类似easeOutCubic的缓动工作，动画在开始时更快，并且当它完成它的过渡时缓慢地嵌入。

Matthew Lein为自定义CSS缓和创建了一个优秀的网站：http://matthewlein.com/ceaser/

但是，当我将它添加到jQuery Mobile时，转换几乎不存在并且非常滞后。这很令人困惑，因为它似乎可以很好地进行3D过渡。

有谁知道发生了什么事？我正在使用iPad 2 / 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

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

translate3d触发gpu加速，其中translateX没有。

jQuery Mobile在iPad上的过渡缓和

1 个答案: