2

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

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

您将看到转换在手机和台式机上的浏览器中都能完美运行。但是只要我“phonegap”它，过渡就不会呈现。最终位置显示出来，例如，如果我点击离开列表项，它将显示相应的到达列表项。但由于某种原因，动画不会发生在电话间隙上。唯一的例外是通过 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)"});

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

谢谢！

PS 我知道有一个 CSS3 @keyframes 规则效果很好，但为了代码的简单性，我宁愿避免这种情况

4

1 回答 1

1

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

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

 transform: translate3d(0,0,0);

但是，有几份报告称这实际上不会触发 iOS 6 设备中的硬件加速。

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

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
于 2013-08-16T04:52:52.577 回答