使用 ngClass 删除 class 时,如何确定元素以 class 开头?
When removing a class using ngClass, how can I be sure that the element starts with the class?
我的意思的一个简单例子:
HTML:
<div ng-class="visibleClass"></div>
JS:
$scope.visibleClass = "invisible";
// Wait until the page loads
$scope.visibleClass = "";
CSS:
div.invisible {
display: none;
}
此处 div 应该开始时不可见,并在页面加载时变得可见。
实际发生的是它在一两帧内可见,然后在加载 js 文件时变得可见。如果有一个过渡,并且元素从其可见状态过渡到其不可见状态,而它应该刚刚开始处于不可见状态,这一点尤其明显。
如何避免这种行为?
即,当我使用 ngClass 删除 class 时,我如何确定该元素以 class 开头?
发生这种情况是因为 angular 到 bootstrap 应用程序需要时间,最简单的解决方案是将常规 class
属性添加到值为 [=12 的元素=].
HTML
<div ng-class="visibleClass" class="invisible"></div>
使用 ng-cloak
指令。
来自文档:
The ngCloak
directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The directive can be applied to the <body>
element, but the preferred usage is to apply multiple ngCloak
directives to small portions of the page to permit progressive rendering of the browser view.
有关详细信息,请参阅 AngularJS ng-cloak
Directive API Reference
我的意思的一个简单例子:
HTML:
<div ng-class="visibleClass"></div>
JS:
$scope.visibleClass = "invisible";
// Wait until the page loads
$scope.visibleClass = "";
CSS:
div.invisible {
display: none;
}
此处 div 应该开始时不可见,并在页面加载时变得可见。
实际发生的是它在一两帧内可见,然后在加载 js 文件时变得可见。如果有一个过渡,并且元素从其可见状态过渡到其不可见状态,而它应该刚刚开始处于不可见状态,这一点尤其明显。
如何避免这种行为?
即,当我使用 ngClass 删除 class 时,我如何确定该元素以 class 开头?
发生这种情况是因为 angular 到 bootstrap 应用程序需要时间,最简单的解决方案是将常规 class
属性添加到值为 [=12 的元素=].
HTML
<div ng-class="visibleClass" class="invisible"></div>
使用 ng-cloak
指令。
来自文档:
The
ngCloak
directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.The directive can be applied to the
<body>
element, but the preferred usage is to apply multiplengCloak
directives to small portions of the page to permit progressive rendering of the browser view.
有关详细信息,请参阅 AngularJS ng-cloak
Directive API Reference