iPad 上的 jQuery Mobile 过渡缓动答案

【问题标题】：jQuery Mobile transition easing on iPadiPad 上的 jQuery Mobile 过渡缓动
【发布时间】：2012-03-20 16:29:14
【问题描述】：

我有一组非常简单的 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 */
}

【问题讨论】：

标签： ipad css jquery-mobile cordova css-transitions

【解决方案1】：

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

translate3d 会触发 gpu 加速，而 translateX 不会。

【讨论】：