Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 98e0e04

Browse files
authored
docs(ngShow/ngHide): add note about flicker when toggling elements
Related to #14015 Closes #16489
1 parent a8bef95 commit 98e0e04

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

src/ng/directive/ngShowHide.js

+38
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,25 @@ var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';
182182
});
183183
</file>
184184
</example>
185+
*
186+
* @knownIssue
187+
*
188+
* ### Flickering when using ngShow to toggle between elements
189+
*
190+
* When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
191+
* happen that both the element to show and the element to hide are visible for a very short time.
192+
*
193+
* This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
194+
* are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
195+
* other browsers.
196+
*
197+
* There are several way to mitigate this problem:
198+
*
199+
* - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
200+
* - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
201+
* - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
202+
* - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
203+
* - Define an animation on the affected elements.
185204
*/
186205
var ngShowDirective = ['$animate', function($animate) {
187206
return {
@@ -382,6 +401,25 @@ var ngShowDirective = ['$animate', function($animate) {
382401
});
383402
</file>
384403
</example>
404+
*
405+
* @knownIssue
406+
*
407+
* ### Flickering when using ngHide to toggle between elements
408+
*
409+
* When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
410+
* happen that both the element to show and the element to hide are visible for a very short time.
411+
*
412+
* This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
413+
* are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
414+
* other browsers.
415+
*
416+
* There are several way to mitigate this problem:
417+
*
418+
* - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
419+
* - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
420+
* - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
421+
* - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
422+
* - Define an animation on the affected elements.
385423
*/
386424
var ngHideDirective = ['$animate', function($animate) {
387425
return {

0 commit comments

Comments
 (0)