Angular.js: ng-hide和ng-show在IE11中短时间同时显示

这听起来很熟悉。 问题是我永远无法可靠地在IE11中重现这些内容。 对我来说，这可能发生了30次。 我也曾在Firefox上看到过它，因此它可能与浏览器刷新requestAnimationFrame队列的速度或我们检测允许动画的时间有关。

您能否测试一下最新的快照： http :

在我的IE11中，每次单击复选框时，都会同时显示这两者。 使用链接的角动画，似乎并没有改变这种行为。

那真是怪了。 您有哪个IE和OS版本？ 并且您的计算机通常运行缓慢还是负载不足？

我们有相当高端的计算机（我尝试了其中的三台），实际上我最初的猜测是它足够快，可以显示仅在短时间内可见的内容。 我正在运行Windows 8.1和IE版本11.0.9600.18202。 我在Windows 7上尝试过的其中一台计算机也出现了同样的问题。

我目前正在应用此CSS来避免该问题：
.ng-hide.ng-hide-animate {
显示：无！重要；
}

如果我们想为某些ng-hide动画而不是为某些动画，这当然会给我们将来带来麻烦。

嗯，我没想到计算机速度太快。 可能就是这样。 我也有较新的IE11版本（11.0.9600.18204），但是我怀疑这是原因。

我现在在虚拟Windows 7上的IE11中尝试了此操作，并且可能每2-10次尝试一次就遇到此问题。 这可能是因为我的虚拟机运行速度较慢，但​​这只是一个猜测。

我在Chrome中有一个相同的问题，带有ng-switch。 发生这种情况的具体情况是，当ngModel中的视图值发生更改时，它会：a）删除父表单上的ng-valid-parse类，b）删除表单字段上的类（自定义empty class）和b）翻转ng-switch （因为然后禁用了表单字段）。 发生这种情况是因为父动画（a）任务首先运行，并且调度程序等待直到完成，然后从表单字段（b）请求另一个框架来运行该任务，然后等待_another_框架来运行ng-switch动画任务（c），导致ng-switch中的两个元素都临时显示的一帧闪烁。

@plestik您可以在plnkr.co或类似网站中发布演示吗？

@Narretz我会

抱歉，无法在Plunkr中重现。

@Narretz我可以做些什么来帮助解决此问题？ 如果您愿意，我可以为您提供登台环境的登录凭据，在该环境中，我可以始终如一地重现它。

编辑：我错过了文档的一部分，在该部分中很清楚地表明，将结构动画与类动画结合使用会导致闪烁。 那没关系

我在使用OS X的Chrome上遇到类似的问题。在我的情况下，这是两次ng-show，它们具有不同的显示条件（永远不会同时出现）。 即使我立即紧接着切换这两个条件，在短暂的一刻，两个元素都可见。 并非在所有页面配置中都会发生这种情况，但是在一种特定情况下会相当一致地发生。

在Windows的Chrome浏览器中，我也使用角和角动画1.4.12遇到相同的问题。

@PhilipWallin解决方案目前是一个不错的解决方法。

我在适用于iOS 9.3的iOS Simulator中遇到了相同的问题。 我已上传了演示该问题的视频： https :

最近，我使用Angular材质弄脏了我的手，并将其包含在现有项目中，并开始在使用ng-if / ng-show的Chrome中体验这种闪烁行为。 经过一连串的错误发现由于“ ngAnimate”引起的问题。

@PhilipWallin解决方案对我来说是一种解决方法，不确定将来是否会解决。

只需在我的CSS中添加以下内容，然后将我的“ ng-if”替换为“ ng-show”
.ng-hide.ng-hide-animate {
显示：无！重要；
}

PS：使用Angular和ngAnimate版本v1.5.7

+1

嗨，我遇到了与1.5.8类似的问题（刚刚从1.12.15版升级）。

该问题在IE11下非常明显，它在Chrome下也存在，但通常情况下过渡太快而无法察觉。

我所拥有的指令是一个选项卡控件，该控件使用包含在内的选项卡页。 我正在经历的闪烁（简要地并排显示了新的和旧的活动标签页html）是用户在标签之间切换时（即在编译和模板加载之后）。 该代码使用带有boolean标志的ng-show来决定是否显示该页面（在任何一次中，最多可激活1个页面）。
如果我将ng-show替换为ng-if，则不会闪烁。

我原本打算使用的解决方法是使用具有相同ng-show条件标记的ng-class来激活自定义css类'.myCloak {display：none！important}'（即ng-cloak使用的css ）例如
ng-show =“ tab.active” ng-class =“ {'myCloak'：tab.active}”可以解决此问题。

我将尝试创建一个plunkr进行演示，但可能需要一些时间。

同时，我将附上该问题的屏幕截图，该问题在IE11下的应用程序中显示以及从中获取的视频。

在屏幕快照上，红色细圆角矩形内的区域显示错误显示的选项卡页以及相关的DOM检查。 蓝色的圆角矩形区域突出显示了活动选项卡，该选项卡也将显示。

通过播放视频[http://take.ms/czZZV]，您会看到视频不一致，但是经常发生。

我在Angular 1.5.8的chrome 54上遇到相同的问题。

@PhilipWallin解决方案现在也适用。

知道原因可能是什么吗？

您好，我设法整理出一个显示此行为的代码：

[https://plnkr.co/edit/PTrvz8]

如果在IE11下运行它并在选项卡页面之间切换，您应该会看到它。 该代码有点丑陋，但它显示了问题。 如果您取消注释style.css中的ng-hide-animate覆盖（ @PhilipWallin解决），问题就会消失。

我将在星期一将其整理起来，并使用小插曲发布有关该问题的视频，以防您仍然无法复制。 希望这可以帮助...

我整理了一下小酒杯，并添加了说明，
https://plnkr.co/edit/l70kaJ
在相应的选项卡页面周围有蓝色和红色边框，以使双重渲染明显（在IE11下）

正如@teterovic在问题＃

@garycuthbert感谢plnkr，它很好地显示了该问题（在IE11中）。 我将进行调查，看看是否有什么可以做的。
同时，如果您实际上没有在元素上使用动画，则可以使用classNameFilter禁用该元素上的动画： https ://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider＃ classNameFilter

大家好，
我为@garycuthbert的示例创建了一个补丁。 受此问题影响的每个人都可以使用此角度动画文件进行测试，然后报告问题是否消失或行为是否得到改善吗？ https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

嗨，我可能未正确应用补丁，但使用此文件时出现以下错误：

我尝试替换先前的angular-animate.js文件的内容，以及显式加载angular-animate-patch.js文件，抱怨“未知提供程序'$$ isDocumentHiddenProvider”。 我正在针对1.5.8版本运行，我缺少什么吗？

嗨， @ garycuthbert，我最初是将补丁文件链接到angular master。 这是1.5分支的一个： https :

感谢@Narretz ，我已经尝试了您的补丁程序，它可以在IE11下为我解决此问题，此修补程序是否有可能将其纳入下一个1.5版本？

我将等待几天，以便其他人进行测试，否则我将在下周将其合并。 我们目前没有1.5.9的发布日期，所以我认为它会成为现实。 我只是不能说1.5.9何时发布...

太好了，谢谢修复@Narretz，我将密切关注下一个版本。

我还不确定，但是我认为此修复程序还可以帮助解决我们在指令中看到的另一个问题，我们使用了许多嵌套的指令，这些指令使用templateUrl，并且在最新的angular版本中，我们开始看到一些非常难看的瞬态在初始页面加载和视图过渡时呈现。

尽管我很欣赏（现在更是如此），templateUrl机制是异步的，并且父/子指令不能彼此等待以加载这种瞬时渲染，但我们看到的看起来与该问题类似，即相互排斥的dom块在短暂的渲染中。相同的空间。 我们正在设法通过使用'template'而不是'templateUrl'来缓解此问题，并从模板缓存中返回html以加快加载速度，但我将撤消其中的某些更改，并使用动画补丁重新测试以查看是否有帮助。

作为最后的观察，我认为ng-include和ui-view动画钩子也存在类似的问题。 固定起来非常困难，但是由于我们的应用广泛使用了这两个指令，因此在IE下的净效果非常明显，而在Chrome下效果却相对较小（效果是dom互斥块的简短呈现，即@Narretz具有相同的问题）解决上面的ng-hide）。
通过预加载我们的自定义指令模板并使用'template'访问它们，并对ng-include和ui-view触发的加载/加载事件做出反应（使用自定义类'display：没有！重要”，可以在加载事件和加载事件之间隐藏相关节点），但仍然偶尔会出现此问题。

有撤消所有这一切，并通过设置$ animateProvider.classNameFilter作为@Narretz提出的问题消失指定排除类。

我们目前不使用任何动画，但是这可能会在不久的将来改变，但是我们可以使用classNameFilter激活我们需要的区域。

@Narretz ，不确定您的修复程序是否可以更广泛地应用于ng-include和ui-view场景，但症状肯定相同。

在某种意义上说，此修复程序不是“常规的”，它不在ngShow / ngHide指令代码中，而是在动画逻辑本身中。 但是，ngShow / Hide使用特定的动画功能（临时类），ngInclude和ngView不会使用该功能。 不看示例就很难说出他们的问题所在。

嗨Narretz，
我一直尝试尝试解决此问题，并在此找到此补丁，此补丁在应用后已解决了1.5.0.Beta版本的问题，但仍然无法使用1.5.8。 谢谢你的路径:)

同样在补丁中，我立即注意到使用了double equal'=='，将其更改为'==='后可以使用。 这是用于条件检查的正确语法。

我也已经在1.5.9和1.6.0的进一步版本中尝试过此功能，但无论如何仍无法使用补丁。 任何帮助将是非常可贵的。

谢谢
法哈德

圣诞节过后，我将审查@gkalpak的PR，然后希望我们能尽快

在无法在1.5.9和1.6.1中运行的其他版本中进行了尝试。 任何帮助/建议将是非常可贵的。 谢谢
法哈德

1.5.10仍然是相同的问题

遇到相同的问题，想尝试从1.3.x升级到1.6.1，并且不得不再次降级到1.4.4。 对Angular团队来说真是一个尴尬

@ stijn26您可能做错了，这应该是一个stackoverflow问题，但无论如何：

• 与1.X-1.5相比，1.6发生了重大更改，请考虑一下-您可以在github上的更改日志中看到更改（尝试1.5 instad）
• 您是否更新了所有模块？ 像angular-animate.js到相应的修订版，或者仅仅是angular.min.js？ 如果不尝试

我检查了所有重大更改并进行了修改，所有模块均已更新。 在这个话题中，我和其他人有完全一样的问题。

@mmomeni @ stijn26 @teterovic
目前，我们发现可以打开和关闭动画的工作目前为止还不错。 示例如下。 希望它也能对您有所帮助，直到团队找到正确的解决方案。

$animate.enabled(false);
    $scope.$on('$destroy',
        function() {
            $animate.enabled(true);
        });

我在Windows 7的Chrome 57上在Ang-show 1.6.3上出现ng-show时出现闪烁。显示：.ng-hide.ng-hide-animate上没有为我修复的显示。

@ samal84您可以提供一个演示吗？ 我无法在Chrome 58中重现此问题，第一篇文章中的plnkr已更新为1.6.4。

好的，它看起来更像是带有角材料的md-switch的错误，现在我尝试制作一个最小的演示： http :

尝试快速单击该开关，您应该看到md-switch内部和外部的开/关行为有所不同。 内部的一个闪烁，同时渲染一秒钟，而外部的一个很好。

@ samal84也可以通过禁用$ animate（使用angular-material使用）来解决。 演示：
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview