angularjs使用ng-show的闪烁问题

最新推荐文章于 2020-05-20 14:07:36 发布

d623141153

最新推荐文章于 2020-05-20 14:07:36 发布

阅读量773

点赞数

CC 4.0 BY-SA版权

文章标签： angularjs 体验优化 ng-show

本文链接：https://blog.youkuaiyun.com/d623141153/article/details/86571419

本文介绍了解决AngularJS中使用ng-show指令时出现的元素闪烁问题的方法。首先推荐在head中添加特定的CSS样式来隐藏未初始化的AngularJS元素，但此方法可能不完全有效。最终解决方案是通过变量控制div元素的显示与隐藏，实现更稳定的视觉效果。

angularjs使用ng-show的闪烁问题

直接在head添加以下代码<style>@charset "UTF-8";[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng:form{display:block;}</style>

以上方法可能还会有问题，终极解决方案：

// 默认给页面元素设置display: none; 然后通过变量showDialog的true/false来添加class类名
.dialog{
	display: none;
}
.displayShow{
    display: block !important;
}
<div class="dialog" ng-class="{'displayShow': showDialog}"></div>