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

Commit f4149b7

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 8a8c94c commit f4149b7

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
@@ -421,6 +422,23 @@ than any styles that are independent from ngAnimate.
421422

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

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

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

0 commit comments

Comments
 (0)