invisi/angular.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

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

Browse Source 
Related to https://github.com/angular/angular.js/issues/14015

Closes #16489
This commit is contained in:
Martin Staffa
2018-03-14 22:35:34 +01:00
committed by GitHub
parent a8bef95127
commit 98e0e047b0
1 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ng/directive/ngShowHide.js
+38
View File
@@ -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 {
@@ -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 {