From a1e40f8cbe4dbe3ac0df178bcd62e4513eca96f1 Mon Sep 17 00:00:00 2001 From: "John (J5) Palmieri" Date: Fri, 15 Jul 2016 11:10:12 -0400 Subject: [PATCH] doc: 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. https://github.com/angular/angular.js/issues/14907 --- docs/content/guide/animations.ngdoc | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc index f2551ea374b0..1befc6eda7d6 100644 --- a/docs/content/guide/animations.ngdoc +++ b/docs/content/guide/animations.ngdoc @@ -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