我有一个问题在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>
当前回答
我有一个类似的问题,并发现如果你有一个类包含过渡,元素将闪烁。我试图添加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
其他回答
我不能让这些方法工作,所以我最终做了以下。对于你最初想隐藏的元素:
<div <!--...--> style="display: none;" ng-style="style">
然后在你的控制器中,在顶部或顶部附近添加以下内容:
$scope.style = { display: 'block' };
这样,元素最初是隐藏的,只有当控制器代码实际运行时才显示。
您可以根据需要调整位置,也许还可以添加一些逻辑。在我的例子中,如果当前没有登录,我将切换到登录路径,并且不希望我的界面事先闪烁,因此我设置了$scope。样式后的登录检查。
上面列出的解决方案没有一个对我有效。然后我决定看看实际的函数,并意识到当“$scope.”Watch”被解雇了,它在name字段中放置了一个值,这并不意味着是这样的情况。在代码中,我设置oldValue和newValue
$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});
本质上,当范围。在这种情况下,AngularJS监视name变量(model.value)的变化。
我遇到了一个问题,在ng-show指令有机会运行之前,<div ng-show="expression">最初会在几分之一秒内可见,即使"expression"最初是假的。
我使用的解决方案是手动添加“ng-hide”类,如<div ng-show="expression" ng-hide>,以确保它一开始是隐藏的。ng-show指令将在此之后根据需要添加/删除ng-hide类。
不管怎样,我也遇到过类似的问题,斗篷不能用。也许有必要检查你的应用/站点是否启用了缓存来重用源文件,看看是否有帮助。
随着我与闪烁的磨合,我在DevTools打开和缓存禁用的情况下进行测试。离开面板关闭缓存启用固定我的问题。
我有一个类似的问题,并发现如果你有一个类包含过渡,元素将闪烁。我试图添加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