Question

我在使用phonegap上的CSS转换时遇到了一些麻烦。我们正在转换一个transform：translate3d属性，让内容视图滑入和滑出视图，以及滑动以显示侧边栏。

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

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

以下是一小段代码：

这是滑动元素上的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)"});

如果有人有任何建议，我们将非常感激

谢谢！

P.S。我知道有一个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;

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

1 个答案: