本文介绍了NG-动画不Samaung银河S4的机器人的WebView工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图实现与 NG-动画在中,我使用Android应用混合按钮的WebView

I'm trying to implement an animation with ng-animate for a button in an Android hybrid app in which I use WebView.

按钮动画是这样的:

<div class="dish-like dish-like-animater">
    <img ng-hide="page.liked" class="dish-like-unliked" src="http://dev.fotodish.com/img/dish_like_icon@2x.png" ng-click="Like()">
    <img ng-show="page.liked" class="dish-like-liked-up" src="http://dev.fotodish.com/img/dish_liked_bg@2x.png">
    <img ng-show="page.liked" class="dish-like-liked-down" src="http://dev.fotodish.com/img/dish_liked_icon@2x.png" ng-click="Unlike()">
</div>

请检查该捣鼓细节:

我测试过的桌面版Chrome,一个三星Galaxy S4,和摩托G.与目前的动画,动画作品中的所有以下环境优良:

I've tested the animation on desktop Chrome, a Samsung Galaxy S4, and a Moto G. And currently, the animation works fine in all the following environments:


  • 桌面版Chrome,

  • Android浏览器(互联网)对这款Galaxy S4,

  • 铬对这款Galaxy S4,

  • Chrome的这个摩托G,

  • 在此Moto G的的WebView

然而,当我试图在这款Galaxy S4的WebView中运行它,其行为相当怪异。
开始的时候,在我点击它,它看起来正常, page.liked 是否是真还是假。然而,当我点击它,一切就消失了。而发生错误。堆栈跟踪是这样的:

However, when I tried to run it in the WebView on this Galaxy S4, its behavior was quite weird.At the very beginning, before I clicked on it, it looked ok, whether page.liked was true or false. However, when I clicked on it, everything just disappeared. And an error occured. The stack trace was like this:

03-21 16:40:32.412    6019-6019/com.fotodish.android E/Web Console﹕ TypeError: undefined is not a function
        at file:///android_asset/www/bower_components/angular/angular.js:11330:9
        at afterReflow (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1092:11)
        at Object.fn (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1585:13)
        at file:///android_asset/www/bower_components/angular-animate/angular-animate.js:450:46
        at Array.forEach (native)
        at forEach (file:///android_asset/www/bower_components/angular/angular.js:322:11)
        at run (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:438:11)
        at Object.before (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:471:13)
        at performAnimation (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:897:16)
        at Object.removeClass (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:702:11):9509
03-21 16:40:32.432    6019-6019/com.fotodish.android E/Web Console﹕ TypeError: undefined is not a function
        at file:///android_asset/www/bower_components/angular/angular.js:11330:9
        at afterReflow (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1092:11)
        at Object.fn (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1585:13)
        at file:///android_asset/www/bower_components/angular-animate/angular-animate.js:450:46
        at Array.forEach (native)
        at forEach (file:///android_asset/www/bower_components/angular/angular.js:322:11)
        at run (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:438:11)
        at Object.before (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:471:13)
        at performAnimation (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:897:16)
        at Object.removeClass (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:702:11):9509

我采用了棱角分明1.2.14和角动画1.2.14。关于 NG-视图的其他动画正常工作的同时...

I'm using angular 1.2.14 and angular-animate 1.2.14. An other animation regarding ng-view works fine at the same time...

web视图设置,如:

The WebView settings are like:

    mWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setAllowUniversalAccessFromFileURLs(true);
    webSettings.setDatabasePath("/data/data/" + this.getPackageName() + "/databases/");
    webSettings.setDomStorageEnabled(true);
    mWebView.setWebChromeClient(new WebChromeClient());

银河S4运行Android 4.3,原三星之一。该Moto G的还运行Android 4.3。

The Galaxy S4 runs Android 4.3, the original Samsung one. The Moto G also runs Android 4.3.

这款Galaxy S4的用户代理字符串是:

The UserAgent string of this Galaxy S4 is:

Mozilla/5.0 (Linux; U; Android 4.3; en-us; SAMSUNG-SGH-I337 Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

任何人有一个想法发生了什么事?

Anyone has an idea what has happened?

推荐答案

据我考察, NG-动画似乎与三星Galaxy手机与Android的WebView中极不相称4.3或更低。 Android 4.4的星系铬的WebView似乎罚款。看来,这是什么毛病 NG-动画自动回流焊

As I inspected, ng-animate seems very incompatible with the WebView of Samsung Galaxy mobile phones with Android 4.3 or lower. Android 4.4 Galaxies with Chrome WebView seem fine. It seems that it's something wrong with ng-animate's auto-reflow.

启用 NG-动画,奇怪的事情是:


  • 对于 NG-开关 NG-节目 / NG-隐藏,动画后,留下的元素消失了,但该元素进入不会出现。

  • 对于 NG-视图,当一个新的页面中输入的,它的行为像旧仍然存在,虽然不可见。当您尝试点击页面上,它像你实际上点击老页面上。

  • For ng-switch and ng-show / ng-hide, after the animation, the element leaving is gone, but the element entering does not appear.
  • For ng-view, when a new page enters, it behaves like that the old one is still there, although not visible. When you try to click on the page, it behaves like that you are actually clicking on the old page.

我的当前和临时的解决方案:

关闭 $动画服务,为三星Galaxy手机用户。当 $动画被禁用,他们可以使用的功能正常,思而不动画。添加以下code到 .RUN 功能:

Turn off $animate service for Samsung Galaxy phone users. When $animate is disabled, they can use the functions normally, thought without animations. Add the following code into .run function:

var s = ((function isSamsungWebkit(ua) {
    return (ua.indexOf('SAMSUNG') != -1 || ua.indexOf('SGH') != -1 || ua.indexOf('SCH') != -1 || ua.indexOf('GT-I') != -1) && ua.indexOf('534.30') != -1;
})($window.navigator.userAgent));
console.log("Samsung Hack", s);
$animate.enabled(!s);

这不是最好的解决办法,而是一个解决方案。

It's not the best solution, but one solution.

这篇关于NG-动画不Samaung银河S4的机器人的WebView工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 23:54
查看更多