Angular Animations 和 Phonegap 不在移动设备上运行

Posted 2023-02-19

【中文标题】Angular Animations 和 Phonegap 不在移动设备上运行

【英文标题】：Angular Animations and Phonegap not running on mobile

【发布时间】：2013-06-02 14:26:24

【问题描述】：

我在 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 构建中（它是）。

每个用户的 cmets，这里是 html。其余的由 Angular 的默认动画处理。它们在浏览器中运行时工作正常，但在 phonegap 中运行时却不行。路由有效，ng-view 改变了，但动画从未出现。

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


     </div>

在 Nexus 4 上测试。

【问题讨论】：

什么平台？ ios还是安卓？

我最终使用了一个预制的 css 解决方案 - daneden.me/animate 至少在 IOS 上效果很好。

@AdamWare 我在 Android 4.2 上测试它，特别是一个 nexus 4。

我在 Android 上也遇到了这个问题。我可以确认这是一个 Angular ng-animate 特定问题，因为当我在代码中设置 ng-class 时，动画在 Android 中有效。

我无法让角度动画工作。可能与android使用的嵌入式浏览器及其对css动画的支持有关。

【参考方案1】：

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

【参考方案2】：

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

在 Android 4.2 中对动画（以及一般的 HTML5）的支持非常糟糕。这是这些怪癖的handy rundown。

希望您自 6 月以来已经能够升级您的 Android 版本！