我有一个问题在angular.js的指令/类ng-斗篷或ng-show。
Chrome运行正常,但Firefox使用ng-cloak或ng-show导致元素闪烁。 恕我直言,这是由于将ng-cloak/ng-show转换为style="display: none;",可能Firefox javascript编译器有点慢,所以元素出现一段时间,然后隐藏?
例子:
<ul ng-show="foo != null" ng-cloak>..</ul>
我有一个问题在angular.js的指令/类ng-斗篷或ng-show。
Chrome运行正常,但Firefox使用ng-cloak或ng-show导致元素闪烁。 恕我直言,这是由于将ng-cloak/ng-show转换为style="display: none;",可能Firefox javascript编译器有点慢,所以元素出现一段时间,然后隐藏?
例子:
<ul ng-show="foo != null" ng-cloak>..</ul>
当前回答
实际上有两个独立的问题会导致闪烁问题,你可能会面临其中一个或两个。
问题1:ng-cloak应用得太晚
这个问题的解决方法是确保AngularJS加载在头文件中。参见ngCloak文档:
为了得到最好的结果,angular.js脚本必须加载在头文件中 HTML文件的部分;或者,CSS规则(上面)必须是 包含在应用程序的外部样式表中。
问题2:ng-cloak被过早移除
当您的页面上有大量的CSS,规则相互层叠,并且在应用顶层之前较深层的CSS闪现时,最可能发生此问题。
jQuery的解决方案包括在元素中添加style="display:none",只要样式被删除得足够晚,就可以解决这个问题(实际上这些解决方案解决了两个问题)。但是,如果你不喜欢直接在HTML中添加样式,你可以使用ng-show来达到同样的效果。
从问题中的例子开始:
<ul ng-show="foo != null" ng-cloak>..</ul>
在元素中添加额外的ng-show规则:
<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>
(为了避免问题1,你需要带上斗篷)。
然后在你的app.run set isPageFullyLoaded:
app.run(['$rootScope', function ($rootScope) {
$rootScope.$safeApply = function (fn) {
$rootScope.isPageFullyLoaded = true;
}
}]);
注意,根据你正在做的事情,app.run可能是设置isPageFullyLoaded的最佳位置,也可能不是。重要的是确保isPageFullyLoaded在你不想闪烁的东西准备好显示给用户后被设置为true。
听起来问题1是OP正在解决的问题,但其他人发现解决方案不起作用或只部分起作用,因为他们正在解决问题2。
重要提示:请确保在ng-cloak应用太晚和移除太快的情况下使用解决方案。仅解决其中一个问题可能无法缓解症状。
其他回答
实际上有两个独立的问题会导致闪烁问题,你可能会面临其中一个或两个。
问题1:ng-cloak应用得太晚
这个问题的解决方法是确保AngularJS加载在头文件中。参见ngCloak文档:
为了得到最好的结果,angular.js脚本必须加载在头文件中 HTML文件的部分;或者,CSS规则(上面)必须是 包含在应用程序的外部样式表中。
问题2:ng-cloak被过早移除
当您的页面上有大量的CSS,规则相互层叠,并且在应用顶层之前较深层的CSS闪现时,最可能发生此问题。
jQuery的解决方案包括在元素中添加style="display:none",只要样式被删除得足够晚,就可以解决这个问题(实际上这些解决方案解决了两个问题)。但是,如果你不喜欢直接在HTML中添加样式,你可以使用ng-show来达到同样的效果。
从问题中的例子开始:
<ul ng-show="foo != null" ng-cloak>..</ul>
在元素中添加额外的ng-show规则:
<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>
(为了避免问题1,你需要带上斗篷)。
然后在你的app.run set isPageFullyLoaded:
app.run(['$rootScope', function ($rootScope) {
$rootScope.$safeApply = function (fn) {
$rootScope.isPageFullyLoaded = true;
}
}]);
注意,根据你正在做的事情,app.run可能是设置isPageFullyLoaded的最佳位置,也可能不是。重要的是确保isPageFullyLoaded在你不想闪烁的东西准备好显示给用户后被设置为true。
听起来问题1是OP正在解决的问题,但其他人发现解决方案不起作用或只部分起作用,因为他们正在解决问题2。
重要提示:请确保在ng-cloak应用太晚和移除太快的情况下使用解决方案。仅解决其中一个问题可能无法缓解症状。
我会用<div ng-cloak>包裹<ul>
我有一个类似的问题,并发现如果你有一个类包含过渡,元素将闪烁。我试图添加ng-cloak,但没有成功,但通过删除过渡按钮停止闪烁。
我用的是离子框架,纽扣轮廓有这样的过渡
.button-outline {
-webkit-transition: opacity .1s;
transition: opacity .1s;
}
只需重写类以删除转换,按钮就会停止闪烁。
更新
同样,在ionic上使用ng-show/ng-hide时会出现闪烁。添加以下CSS可以解决这个问题:
.ng-hide-add,
.ng-hide-remove {
display: none !important;
}
来源:http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9
避免断行
<meta http-equiv="Content-Security-Policy" content="
default-src 'FOO';
script-src 'FOO';
style-src 'FOO';
font-src 'FOO';">
适用于Firefox 45.0.1
<meta http-equiv="Content-Security-Policy" content=" default-src 'FOO'; script-src 'FOO'; style-src 'FOO'; font-src 'FOO';">
我尝试了这里发布的每一个解决方案,仍然在Firefox中闪烁。
如果它有助于任何人,我通过添加style="display: none;"到主要内容div,然后使用jQuery(我已经在页面上使用它)$('#main-div-id').show();一旦从服务器获取数据后加载了所有内容;