18

我在 phonegap 应用程序中添加了一些 ng-view 动画（角度 v 1.1.5）。它们在使用ripple进行测试时以及将手机的浏览器（在本例中为android chrome）指向在线应用程序时在浏览器中工作得很好，但是当与phonegap一起安装时，动画不会运行。我不确定问题出在 phonegap 还是 angular。起初我认为它只是动画太快，所以我将它们放慢到 1.5 秒，但它在应用程序中没有任何变化。

这是电话间隙问题、角度问题和/或我们如何使用这些问题？

CSS定义的动画： 

.view-enter, .view-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.view-enter {
  opacity:0;

}
.view-enter.view-enter-active {

  opacity:1;
}

.view-leave {

  opacity:1;
}
.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

同样，这些在手机的浏览器中工作得很好，只是在 phonegap 应用程序中时不行。使用 Adob​​e build 构建应用程序。我还在获取 css 并在页面上显示只是为了确认实际的 css 文件包含在 phonegap 构建中（它是）。

根据用户的评论之一，这里是 HTML。其余的由 Angular 的默认动画处理。它们在浏览器中运行时工作正常，但在 phonegap 中运行时却不行。路由有效，ng-view 改变了，但动画永远不会发生。

   <div class="container-fluid" id="viewer" ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}" >


     </div>

在 Nexus 4 上测试。

4

2 回答 2

1

在旧版 Android 上部署时，您可能会将CocoonJS（与 Cordova 一起使用）或Crosswalk作为加速各种与浏览器相关的缓慢的路径。

于 2014-04-25T00:00:31.443 回答
0

这绝对是 Android 4.2 的原生浏览器的问题。第一条线索是它在桌面和 Chrome 中运行良好，但在 Phonegap 中却不行——InAppBrowser 使用 Android 的股票浏览器。

在 Android 4.2 中，对动画（以及一般的 HTML5）的支持非常糟糕。这是这些怪癖的一个方便的概述。

希望您能够从 6 月开始升级您的 Android 版本！

于 2014-04-24T23:05:32.230 回答