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

Commit 26dac57

Browse files
John (J5) PalmieriNarretz
John (J5) Palmieri
authored andcommitted
doc(guide/Animations): point to $animate.pin() to enable animation for elements outside an Angular app
Add a section inside of the ngAnimate documentation to point to $animate.pin(). It was not clear in the documentation why animations were being disabled inside of modals and popup menus. This documentation explains in what situations elements may be dynamically placed outside of the application DOM and points to the API documentation on how to enable animations for these types of elements. Related #14907 Closes #14918
1 parent cd06ccc commit 26dac57

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

docs/content/guide/animations.ngdoc

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,7 @@ By setting `transition: 0s`, ngAnimate will ignore the existing transition style
347347
animations will still execute, though). This can be used to prevent {@link guide/animations#preventing-collisions-with-existing-animations-and-third-party-libraries
348348
issues with existing animations interfering with ngAnimate}.
349349

350+
350351
## Preventing flicker before an animation starts
351352

352353
When nesting elements with structural animations such as `ngIf` into elements that have class-based
@@ -419,6 +420,23 @@ than any styles that are independent from ngAnimate.
419420

420421
You can also use one of the two other {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations strategies to disable animations}.
421422

423+
424+
### Enable animations for elements outside of the Angular application DOM tree: {@link ng.$animate#pin $animate.pin()}
425+
426+
Before animating, `ngAnimate` checks to see if the element being animated is inside the application DOM tree,
427+
and if it is not, no animation is run. Usually, this is not a problem as most apps use the `ngApp`
428+
attribute / bootstrap the app on the `html` or `body` element.
429+
430+
Problems arise when the application is bootstrapped on a different element, and animations are
431+
attempted on elements that are outside the application tree, e.g. when libraries append popup and modal
432+
elements as the last child in the body tag.
433+
434+
You can use {@link ng.$animate#pin `$animate.pin(elementToAnimate, parentHost)`} to specify that an
435+
element belongs to your application. Simply call it before the element is added to the DOM / before
436+
the animation starts, with the element you want to animate, and the element which should be its
437+
assumed parent.
438+
439+
422440
## More about animations
423441

424442
For a full breakdown of each method available on `$animate`, see the {@link ng.$animate API documentation}.

0 commit comments

Comments
 (0)