Angular 动画和 Phonegap 在移动设备上无法运行。

Question

我在一个PhoneGap应用程序中添加了一些ng-view动画（使用angular v 1.1.5）。在浏览器中使用ripple测试时以及将手机浏览器指向在线应用程序时，它们的效果非常好。但是，在使用PhoneGap安装后，这些动画不会运行。我不确定问题是出在PhoneGap还是Angular上。起初，我认为只是动画速度太快，所以我将其减缓到1.5秒，但在应用程序中没有任何改变。

这是一个PhoneGap问题、Angular问题，还是我们该如何使用它们？

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应用程序中不起作用。使用Adobe 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 上进行测试。

- lucuma

---

什么平台？IOS还是Android？ - Adam Ware

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

我从未能够让Angular动画正常工作。也许这与Android使用的嵌入式浏览器及其对CSS动画的支持有关。 - lucuma

我已经测试了这个http://www.yearofmoo.com/nganimate-css3/，它在Android 4.2上的Chrome浏览器中可以正常工作。 - pasine

顺便说一下，如果你想得到一些答案，你应该添加更多的代码而不仅仅是 CSS。 - pasine

Answer 1

你可以考虑使用CocoonJS（与Cordova兼容）或Crosswalk来加速在旧版Android上部署时出现的各种浏览器相关的缓慢问题。

- Brad Green

Answer 2

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

在Android 4.2中，对于动画（以及HTML5总体）的支持非常糟糕。这里有一个方便的摘要来介绍这些怪癖。

希望自六月以来您已经升级了您的Android版本！

- Jake McGuire