CSS 转换上的 Phonegap 转换不呈现。

Question

我在 phonegap 上处理 CSS 过渡时遇到了一些问题。我们正在转换一个 transform: translate3d 属性以使内容视图滑入和滑出视图，以及滑动以显示侧边栏。

这是一个 webapp 的例子（注意转换在浏览器中工作）： http://ferriesapp.ca/app/

您将看到过渡效果在手机和桌面浏览器中都能完美运行。但是只要我“phonegap”它，过渡就不会呈现。最终位置显示出来，例如，如果我点击离开列表项，它将显示相应的到达列表项。但由于某种原因，动画不会发生在电话间隙上。唯一的例外是它在通过 phonegap 时适用于 iOS7，但不适用于 iOS 6 或任何版本的 Android。

这是代码的小sn-p：

这是滑动元素上的 CSS 的样子

#depart-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
}

这是动画类：

.animate {
    transition: transform 0.2s ease-out;
    transition: -webkit-transform 0.2s ease-out;
    transition: -moz-transform 0.2s ease-out;
    transition: -ms-transform 0.2s ease-out;
    transition: -o-transform 0.2s ease-out;
}

最后是调用它的 JS（注意这不是整个函数）：

$("#depart-content").css({"transform":"translate3d(-100%,0,0)","-webkit-transform":"translate3d(-100%,0,0)","-moz-transform":"translate3d(-100%,0,0)","-o-transform":"translate3d(-100%,0,0)","-ms-transform":"translate3d(-100%,0,0)"});

如果有人有任何建议，他们将不胜感激

谢谢！

附注我知道有一个 CSS3 @keyframes 规则效果很好，但为了代码的简单性，我宁愿避免这样做

Answer 1

您关于它适用于 iOS7 但不适用于 iOS6 的声明让我相信这是由于您的 translate3d 声明而发生的。

我假设您输入此行以启用硬件加速 -

 transform: translate3d(0,0,0);

但是，有几个reports 实际上不会触发 iOS 6 设备中的硬件加速。

在我引用的文章中，作者提到使用以下任一命令，都会触发硬件加速。

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;