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

doc: point to $animate.pin() to enable animation for elements outside… #14918

Closed
wants to merge 1 commit into from
Closed
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
10 changes: 10 additions & 0 deletions docs/content/guide/animations.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,16 @@ By setting `transition: 0s`, ngAnimate will ignore the existing transition style
animations will still execute, though). This can be used to prevent {@link guide/animations#preventing-collisions-with-existing-animations-and-third-party-libraries
issues with existing animations interfering with ngAnimate}.

### Enable animations for elements outside of the Angular application DOM tree: {@link ng.$animate#pin $animate.pin()}

It is recommended that the `ngApp` directive is placed on the body tag but there are often times
when an application needs to place it on a different wrapper tag. `ngAnimate` checks to see
if the element being animated is a child of the application and disables animation if it is not.

To avoid unintended clipping most libraries will append popup and modal elements as the last
child in the body tag. You can use `$animate.pin()` to specify a host parent element to allow
the element to be animated even if it exists outside of the DOM structure of the Angular application.

## Preventing flicker before an animation starts

When nesting elements with structural animations such as `ngIf` into elements that have class-based
Expand Down