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

docs(ngShow/ngHide): add note about flicker when toggling elements #16489

Merged
merged 1 commit into from
Mar 14, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions src/ng/directive/ngShowHide.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,25 @@ var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';
});
</file>
</example>
*
* @knownIssue
*
* ### Flickering when using ngShow to toggle between elements
*
* When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
* happen that both the element to show and the element to hide are visible for a very short time.
*
* This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
* are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
* other browsers.
*
* There are several way to mitigate this problem:
*
* - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
* - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
* - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
* - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
* - Define an animation on the affected elements.
*/
var ngShowDirective = ['$animate', function($animate) {
return {
Expand Down Expand Up @@ -382,6 +401,25 @@ var ngShowDirective = ['$animate', function($animate) {
});
</file>
</example>
*
* @knownIssue
*
* ### Flickering when using ngHide to toggle between elements
*
* When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
* happen that both the element to show and the element to hide are visible for a very short time.
*
* This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
* are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
* other browsers.
*
* There are several way to mitigate this problem:
*
* - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
* - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
* - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
* - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
* - Define an animation on the affected elements.
*/
var ngHideDirective = ['$animate', function($animate) {
return {
Expand Down