diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 74f02f923989..8e24b5ba081c 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -182,6 +182,25 @@ var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate'; }); + * + * @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 { @@ -382,6 +401,25 @@ var ngShowDirective = ['$animate', function($animate) { }); + * + * @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 {